Enabling/Disabling Options using JQuery when using bootstrap-select

Question

When input -> option d is empty option -> d should be disabled. (It does)

As soon as input -> option d has some value option -> d should be enabled. (It does't )

 $(document).ready(function() { if (!$('#option_d').val()) { $("#right_option option[value='D']").attr('disabled', 'disabled'); //.removeAttr('disabled') } if (!$('#option_e').val()) { $("#right_option option[value='E']").attr('disabled', 'disabled'); //.removeAttr('disabled') } }); $("#option_d, #option_e").on("change keyup paste", function() { if (!$('#option_d').val()) { $("#right_option option[value='D']").attr('disabled', 'disabled'); //.removeAttr('disabled') } else { $("#right_option option[value='D']").removeAttr('disabled'); } if (!$('#option_e').val()) { $("#right_option option[value='E']").attr('disabled', 'disabled'); } else { $("#right_option option[value='E']").removeAttr('disabled'); } }); 

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.10/css/bootstrap-select.css"> <table> <tr> <td><label class="control-label">Option (A)</label></td> <td><input class="form-control" type="text" name="option_a" placeholder="Option (A)" required /></td> </tr> <tr> <td><label class="control-label">Option (B)</label></td> <td><input class="form-control" type="text" name="option_b" placeholder="Option (B)" required /></td> </tr> <tr> <td><label class="control-label">Option (C)</label></td> <td><input class="form-control" type="text" name="option_c" placeholder="Option (C)" required /></td> </tr> <tr> <td><label class="control-label">Option (D)</label></td> <td><input id="option_d" class="form-control" type="text" name="option_d" placeholder="Option (D)" /></td> </tr> <tr> <td><label class="control-label">Option (E)</label></td> <td><input id="option_e" class="form-control" type="text" name="option_e" placeholder="Option (E)" /></td> </tr> <tr> <td><label class="control-label">Right Answer</label></td> <td> <select id="right_option" class="form-control selectpicker" name="part" data-live-search="true" required> <option value="" selected disabled hidden>Select Quiz</option> <option value="A" data-tokens="Option A">Option A</option> <option value="B" data-tokens="Option B">Option B</option> <option value="C" data-tokens="Option C">Option C</option> <option value="D" data-tokens="Option D">Option D</option> <option value="E" data-tokens="Option E">Option E</option> </select> </td> </tr> </table> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.10/js/bootstrap-select.min.js"></script> 

When input -> option d is empty option -> d should be disabled. (It does)

As soon as input -> option d has some value option -> d should be enabled. (It does't )

It works fine when I don't use any bootstrap. JSFiddle

Answer 1

When you use bootstrap-select your code changes from:

<td>
      <select id="right_option" class="form-control selectpicker" name="part" data-live-search="true" required>
        <option value="" selected disabled hidden>Select Quiz</option>
        <option value="A" data-tokens="Option A">Option A</option>
        <option value="B" data-tokens="Option B">Option B</option>
        <option value="C" data-tokens="Option C">Option C</option>
        <option value="D" data-tokens="Option D">Option D</option>
        <option value="E" data-tokens="Option E">Option E</option>
      </select>
    </td>

to:

<td>
  <div class="dropdown bootstrap-select form-control show">
    <select id="right_option" class="form-control selectpicker" name="part" data-live-search="true" required="" tabindex="-98">
        <option value="" selected="" disabled="" hidden="">Select Quiz</option>
        <option value="A" data-tokens="Option A">Option A</option>
        <option value="B" data-tokens="Option B">Option B</option>
        <option value="C" data-tokens="Option C">Option C</option>
        <option value="D" data-tokens="Option D" disabled="disabled">Option D</option>
        <option value="E" data-tokens="Option E" disabled="disabled">Option E</option>
      </select>
    <button type="button" class="btn dropdown-toggle btn-light bs-placeholder" data-toggle="dropdown" role="combobox" aria-owns="bs-select-1" aria-haspopup="listbox" aria-expanded="true" data-id="right_option" title="Select Quiz">
      <div class="filter-option"><div class="filter-option-inner"><div class="filter-option-inner-inner">Select Quiz</div></div> </div></button>
    <div class="dropdown-menu show" x-placement="bottom-start" style="max-height: 554px; overflow: hidden; min-height: 162px; position: absolute; will-change: transform; top: 0px; left: 0px; transform: translate3d(0px, 38px, 0px);">
      <div class="bs-searchbox"><input type="text" class="form-control" autocomplete="off" role="combobox" aria-label="Search" aria-controls="bs-select-1" aria-autocomplete="list"></div>
      <div class="inner show" role="listbox" id="bs-select-1" tabindex="-1" style="max-height: 490px; overflow-y: auto; min-height: 98px;">
        <ul class="dropdown-menu inner show" role="presentation" style="margin-top: 0px; margin-bottom: 0px;">
          <li><a role="option" class="dropdown-item" id="bs-select-1-0" tabindex="0"><span class="text">Option A</span></a></li>
          <li><a role="option" class="dropdown-item" id="bs-select-1-1" tabindex="0"><span class="text">Option B</span></a></li>
          <li><a role="option" class="dropdown-item" id="bs-select-1-2" tabindex="0"><span class="text">Option C</span></a></li>
          <li class="disabled"><a role="option" class="dropdown-item disabled" id="bs-select-1-3" aria-disabled="true" tabindex="-1"><span class="text">Option D</span></a></li>
          <li class="disabled"><a role="option" class="dropdown-item disabled" id="bs-select-1-4" aria-disabled="true" tabindex="-1"><span class="text">Option E</span></a></li>
        </ul>
      </div>
    </div>
  </div>
</td>

Which means the user sees unordered list instead of select option , so we also have to change the class and attributes in unordered list .

Now, if you are typing something in Option D value, you have to remove all your disabled class, aria-disable attribute and change tabindex value to 0 in:

<li class="disabled"><a role="option" class="dropdown-item disabled" id="bs-select-1-3" aria-disabled="true" tabindex="-1"><span class="text">Option D</span></a></li>

 $(document).ready(function() { if (!$('#option_d').val()) { $("#right_option option[value='D']").attr('disabled', 'disabled'); //.removeAttr('disabled') } if (!$('#option_e').val()) { $("#right_option option[value='E']").attr('disabled', 'disabled'); //.removeAttr('disabled') } $("#option_d, #option_e").on("change keyup paste", function() { if (!$('#option_d').val()) { $("#right_option option[value='D']").attr('disabled', 'disabled'); //.removeAttr('disabled') } else { $("#right_option option[value='D']").removeAttr('disabled'); $("#bs-select-1-3").removeAttr('aria-disabled'); $("#bs-select-1-3").removeClass('disabled'); $("#bs-select-1-3").attr('tabindex', '0'); $("#bs-select-1-3").parent().removeClass('disabled'); } if (!$('#option_e').val()) { $("#right_option option[value='E']").attr('disabled', 'disabled'); } else { $("#right_option option[value='E']").removeAttr('disabled'); } }); }); 

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.10/css/bootstrap-select.css"> <table> <tr> <td><label class="control-label">Option (D)</label></td> <td><input id="option_d" class="form-control" type="text" name="option_d" placeholder="Option (D)" /></td> </tr> <tr> <td><label class="control-label">Option (E)</label></td> <td><input id="option_e" class="form-control" type="text" name="option_e" placeholder="Option (E)" /></td> </tr> <tr> <td><label class="control-label">Right Answer</label></td> <td> <select id="right_option" class="form-control selectpicker" name="part" data-live-search="true" required> <option value="" selected disabled hidden>Select Quiz</option> <option value="A" data-tokens="Option A">Option A</option> <option value="B" data-tokens="Option B">Option B</option> <option value="C" data-tokens="Option C">Option C</option> <option value="D" data-tokens="Option D">Option D</option> <option value="E" data-tokens="Option E">Option E</option> </select> </td> </tr> </table> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.10/js/bootstrap-select.min.js"></script> 

In the above snippet it changes as we are expecting, but comes to its first stage again when we click the button to select the option. For that, we will also do the same thing when the button is clicked.

$("[aria-owns='bs-select-1']").click(function(){
        if (!$('#option_d').val()) {

    $("#right_option option[value='D']").attr('disabled', 'disabled'); //.removeAttr('disabled')
  } else {
  $("#right_option option[value='D']").removeAttr('disabled');
    $("#bs-select-1-3").removeAttr('aria-disabled');
    $("#bs-select-1-3").removeClass('disabled');
    $("#bs-select-1-3").attr('tabindex','0');
    $("#bs-select-1-3").parent().removeClass('disabled');
  }
  if (!$('#option_e').val()) {
    $("#right_option option[value='E']").attr('disabled', 'disabled');
  } else {
    $("#right_option option[value='E']").removeAttr('disabled');
  }
    });

---

Final Working Code:

 $(document).ready(function() { if (!$('#option_d').val()) { $("#right_option option[value='D']").attr('disabled', 'disabled'); //.removeAttr('disabled') } if (!$('#option_e').val()) { $("#right_option option[value='E']").attr('disabled', 'disabled'); //.removeAttr('disabled') } $("#option_d, #option_e").on("change keyup paste", function() { if (!$('#option_d').val()) { $("#right_option option[value='D']").attr('disabled', 'disabled'); //.removeAttr('disabled') } else { $("#right_option option[value='D']").removeAttr('disabled'); } if (!$('#option_e').val()) { $("#right_option option[value='E']").attr('disabled', 'disabled'); } else { $("#right_option option[value='E']").removeAttr('disabled'); } }); $("[aria-owns='bs-select-1']").click(function() { if (!$('#option_d').val()) { $("#right_option option[value='D']").attr('disabled', 'disabled'); //.removeAttr('disabled') } else { $("#right_option option[value='D']").removeAttr('disabled'); $("#bs-select-1-3").removeAttr('aria-disabled'); $("#bs-select-1-3").removeClass('disabled'); $("#bs-select-1-3").attr('tabindex', '0'); $("#bs-select-1-3").parent().removeClass('disabled'); } if (!$('#option_e').val()) { $("#right_option option[value='E']").attr('disabled', 'disabled'); } else { $("#right_option option[value='E']").removeAttr('disabled'); } }); }); 

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.10/css/bootstrap-select.css"> <table> <tr> <td><label class="control-label">Option (D)</label></td> <td><input id="option_d" class="form-control" type="text" name="option_d" placeholder="Option (D)" /></td> </tr> <tr> <td><label class="control-label">Option (E)</label></td> <td><input id="option_e" class="form-control" type="text" name="option_e" placeholder="Option (E)" /></td> </tr> <tr> <td><label class="control-label">Right Answer</label></td> <td> <select id="right_option" class="form-control selectpicker" name="part" data-live-search="true" required> <option value="" selected disabled hidden>Select Quiz</option> <option value="A" data-tokens="Option A">Option A</option> <option value="B" data-tokens="Option B">Option B</option> <option value="C" data-tokens="Option C">Option C</option> <option value="D" data-tokens="Option D">Option D</option> <option value="E" data-tokens="Option E">Option E</option> </select> </td> </tr> </table> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.10/js/bootstrap-select.min.js"></script>