As mentioned above, to solve your problem only need one additional css class for switch and two line of the js (add & remove class).
$('input[name=h3g_civils_required]').on('click', function () {
var h3gCivils = $('#h3g_civils_dimensions'); //Question 15
// if is company
if ($(this).val() == 'Yes') {
// show panel
h3gCivils.show();
// remove disabled prop
h3gCivils.find('input,select,radio').prop('disabled', false);
h3gCivils.find('.textparagraph').removeClass('disabled');
} else {
// if is not company, hide the panel and add disabled prop
//managerOnSite.hide();
h3gCivils.find('.textparagraph').addClass('disabled');
h3gCivils.find('input,select,radio').prop('disabled', true); //Question 16 inactive
}
});
.textparagraph {
margin-left: 15px;
}
.textparagraph.disabled {
color: blueviolet;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<figure class="fig">
<label>
<div class="order">18</div>
<p>Civils required?<span class="asterisk">*</span></p>
</label>
<br />
<input
id="h3g_civils_required_yes"
name="h3g_civils_required"
class="radiobtn"
type="radio"
value="Yes"
required
/>Yes
<input
id="h3g_civils_required_no"
name="h3g_civils_required"
class="radiobtn"
type="radio"
value="No"
/>No
<br />
</figure>
<figure class="fig" id="h3g_civils_dimensions">
<label>
<div class="order">19</div>
<p>Civils lengths (in Mtrs):</p>
</label>
<br />
<p class="textparagraph" disabled>
Soft Dig:
<input
class="otherinput"
type="number"
min="1"
name="h3g_soft_dig"
required
/>
Footway:
<input
class="otherinput"
type="number"
min="1"
name="h3g_footway"
required
/>
Carriageway:
<input
class="otherinput"
type="number"
min="1"
name="h3g_carriageway"
required
/>
Chamber:
<input
class="otherinput"
type="number"
min="1"
name="h3g_chamber"
required
/>
</p>
<br />
</figure>
You can not use disabled on a <p> tag. Or better, you can use it, but is not accessible with CSS selector :disabled. It can be selected as .textparagraph[disabled] (See here). So this will work:
.textparagraph[disabled] {
color:blueviolet;
}
But I would suggest you move the disabled attribute on the <input> tags (to effectively disable them) and then style them as follow:
.textparagraph input:disabled {
color:blueviolet;
}
Or if you need to manipulate the <p> tag (as CBroe pointed out) use a class. Something like this:
.textparagraph.disabled {
color:blueviolet;
}
Then style your component as <p class="textparagraph disabled">
I used the javascript code for making my inputs disabled. It works, but only for inputs. I would like to change the font color also when my inputs are disabled.
My code looks as follows:
$("input[name=h3g_civils_required]").on('click', function() {
var h3gCivils =
$('#h3g_civils_dimensions'); //Question 15
// if is company
if ($(this).val() ==
"Yes") {
// show panel
h3gCivils.show();
// remove disabled prop
h3gCivils.find('input,select,radio').prop('disabled', false);
} else {
// if is not company, hide the panel and add disabled prop
//managerOnSite.hide();
h3gCivils.find('input,select,radio').prop('disabled', true); //Question 16 inactive
}
});
.textparagraph {
margin-left: 15px;
}
.textparagraph:disabled {
color: blueviolet;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<figure class="fig">
<label>
<div class="order">18</div>
<p>Civils required?<span class="asterisk">*</span>
</p>
</label>
<br>
<input id="h3g_civils_required_yes" name="h3g_civils_required" class="radiobtn" type="radio" value="Yes" required>Yes
<input id="h3g_civils_required_no" name="h3g_civils_required" class="radiobtn" type="radio" value="No">No
<br>
</figure>
<figure class="fig" id="h3g_civils_dimensions">
<label>
<div class="order">19</div>
<p>Civils lengths (in Mtrs):</p>
</label>
<br>
<p class="textparagraph" disabled>
Soft Dig: <input class="otherinput" type="number" min="1" name="h3g_soft_dig" required> Footway: <input class="otherinput" type="number" min="1" name="h3g_footway" required> Carriageway: <input class="otherinput" type="number" min="1" name="h3g_carriageway"
required> Chamber: <input class="otherinput" type="number" min="1" name="h3g_chamber" required>
</p>
<br>
</figure>
I put disabled next to my textparagraph class, like they shown here but there is no reaction at all.
Is there any chance to change the text coloration, when the whole <figure> defined by id is disabled by javaScript?
You can not “disable” a paragraph like that, this attribute is only valid for form elements. Just set a class on those elements, and do the formatting that way.
Works only the first one, although if I change my question to Yes, the colour remains disabled. The second one didn’t work at all. Is there something I did wrong then?
The third example doesn’t work, because as I set disabled class and define it then the coloration is changed regardless Yes or No. The second example wouldn’t work, as disabled will cover input only. The text I want to change is outside the input:
Third works but you MUST toggle the disabled class similar to what you do for the .prop(). If your objective is to stile text outside an input that has been
