使用引導選擇時使用JQuery啟用/禁用選項

Question

當輸入->選項d為空時，應禁用選項-> d 。 （確實）

輸入->選項d具有某個值后，應立即啟用選項-> d 。 （ 不是 ）

 $(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> 

當輸入->選項d為空時，應禁用選項-> d 。 （確實）

輸入->選項d具有某個值后，應立即啟用選項-> d 。 （ 不是 ）

當我不使用任何引導程序時，它工作正常。 JSFiddle

Answer 1

使用引導程序時，請選擇以下代碼：

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

至：

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

這意味着用戶看到的是無序列表而不是select選項 ，因此我們還必須更改無序列表中的類和屬性。

現在，如果要在選項D值中鍵入內容，則必須刪除所有disabled類， aria-disable屬性，然后在以下位置將tabindex值更改為0 ：

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

在上面的代碼段中，它按照我們的預期進行了更改， 但是當我們單擊按鈕以選擇選項時，它又回到了第一階段。 為此，單擊按鈕時我們也將執行相同的操作。

$("[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');
  }
    });

---

最終工作代碼：

 $(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>