CSS change text coloration when disabled by javascript

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?

Answer

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>

Advertisement

Answer