CSS change text coloration when disabled by javascript

Question

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">&#42;</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. — CBroe, Sep 03 '21 at 14:51

score 1 · Answer 1 · answered Sep 03 '21 at 14:51

1

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">

answered Sep 03 '21 at 14:51

Newbie

4,462
11
23

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? – Geographos Sep 03 '21 at 14:55
The second one to work requires you to add `disabled` to EACH `` tag within your `
` tag. The third one requires you to add a `disabled` CLASS to yout `
` tag
– Newbie Sep 03 '21 at 15:05
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:
Soft Dig:
– Geographos Sep 03 '21 at 15:20
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 `disabled` according to that then you can not do it with plain CSS (see: https://stackoverflow.com/q/4388102) – Newbie Sep 03 '21 at 15:50
You will allways need to perform two operations; toggle `.disabled` (class) on `
` and toggle `[disabled]` (attribute) on all `` within that `
`.
– Newbie Sep 03 '21 at 15:52

score 1 · Accepted Answer · answered Sep 03 '21 at 17:44

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">&#42;</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>

CSS change text coloration when disabled by javascript

2 Answers2