使用引导选择时使用JQuery启用/禁用选项

Question

当 input->选项d 为空时，应禁用 option-> d 。 （确实）

一旦 input->选项d 具有某个值，应立即启用 option-> 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>

当 input->选项d 为空时，应禁用 option-> d 。 （确实）

一旦 input->选项d 具有某个值，应立即启用 option-> d 。 （没有）

  

当我不使用任何引导程序时，效果很好。 JSFiddle

Answer 1

当您使用 bootstrap-select 时，您的代码将更改为：

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

这意味着用户看到的是无序列表，而不是选择选项，因此我们还必须更改无序列表中的类和属性。

现在，如果要在选项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>