I have written a script to gray out a drop down field if a previous drop down choice wasn't made. If the appropriate drop down choice is picked, the other drop down will no longer be gray.

My question is, how do I, by default, make the drop down field grayed out when the page loads and then make it not grayed out when a drop down choice is picked? /

    <div class="col-md-3">
  <div class="form-group">
    <label>Request Type</label>
    <select name="ReqType" class="form-control select2" style="width: 100%;" required>
      <option value="" disabled selected>Select Request Type</option>
      <option value="SecondAdditional1">SecondAdditional1</option>
      <option value="Blah">Blah</option>
    </select>
  </div>
  <!-- /.form-group -->
</div>
<!-- /.col -->



<div class="col-md-3">
  <div class="form-group">
    <label>Second Additional</label>
    <select name="SecondAdditional" class="form-control select2" style="width: 100%;">
      <option value="" disabled selected>Second Additional</option>
      <option value="Test">Test</option>
      <option value="Test2">Test2</option>
    </select>
  </div>
  <!-- /.form-group -->
</div>
<!-- /.col -->

                            <!--This script is to gray out Second Additional if it is not chosen-->
                            < script >
                              $(document).ready(function() {

                                $('select[name="ReqType"]').change(function() {

                                  if ($(this).val() === 'SecondAdditional1') {
                                    $('[name="SecondAdditional"]').prop("disabled", false);
                                  } else {
                                    $('[name="SecondAdditional"]').prop("disabled", true);
                                  }
                                });
                              }); < /script>

I have written a script to gray out a drop down field if a previous drop down choice wasn't made. If the appropriate drop down choice is picked, the other drop down will no longer be gray.

My question is, how do I, by default, make the drop down field grayed out when the page loads and then make it not grayed out when a drop down choice is picked? https://jsfiddle/hb1k87xj/

    <div class="col-md-3">
  <div class="form-group">
    <label>Request Type</label>
    <select name="ReqType" class="form-control select2" style="width: 100%;" required>
      <option value="" disabled selected>Select Request Type</option>
      <option value="SecondAdditional1">SecondAdditional1</option>
      <option value="Blah">Blah</option>
    </select>
  </div>
  <!-- /.form-group -->
</div>
<!-- /.col -->



<div class="col-md-3">
  <div class="form-group">
    <label>Second Additional</label>
    <select name="SecondAdditional" class="form-control select2" style="width: 100%;">
      <option value="" disabled selected>Second Additional</option>
      <option value="Test">Test</option>
      <option value="Test2">Test2</option>
    </select>
  </div>
  <!-- /.form-group -->
</div>
<!-- /.col -->

                            <!--This script is to gray out Second Additional if it is not chosen-->
                            < script >
                              $(document).ready(function() {

                                $('select[name="ReqType"]').change(function() {

                                  if ($(this).val() === 'SecondAdditional1') {
                                    $('[name="SecondAdditional"]').prop("disabled", false);
                                  } else {
                                    $('[name="SecondAdditional"]').prop("disabled", true);
                                  }
                                });
                              }); < /script>

• javascript
• jquery
• html
• drop-down-menu

2 Answers 2

On your select elements set the disabled attribute like so:

<select name="SecondAdditional" class="form-control select2" style="width: 100%;" disabled="true">
...
</select>

You should set the attribute disabled, or remove it (source: w3c HTML select disabled Attribute)

In markup:

<select name="SecondAdditional" class="form-control select2" disabled>

or (for XHTML patibility, but works everywhere):

<select name="SecondAdditional" class="form-control select2" disabled="disabled">

In code:

if ($(this).val() === 'SecondAdditional1') {
  $('[name="SecondAdditional"]').removeAttr("disabled");
} else {
  $('[name="SecondAdditional"]').attr("disabled", "disabled");
}