Enabling/Disabling 使用 bootstrap-select 时使用 JQuery 的选项
Enabling/Disabling Options using JQuery when using bootstrap-select
当 input -> option d 为空时 option -> 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>
当 input -> option d 为空时 option -> d 应该被禁用。 （的确如此）
一旦 输入 -> 选项 d 有一些值 选项 -> d 应该被启用。 （不会）
It works fine when I don't use any bootstrap. JSFiddle
当您使用 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>
这意味着用户看到的是无序列表而不是select选项，因此我们还必须更改class 和 无序列表中的属性 .
现在，如果您在 选项 D 值中输入内容，您必须删除所有 disabled class、aria-disable 属性并将 tabindex 值更改为 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>
在上面的代码片段中，它发生了我们预期的变化，但是 当我们点击按钮select选项。为此，我们也将在单击按钮时执行相同的操作。
$("[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>
当 input -> option d 为空时 option -> 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>
当 input -> option d 为空时 option -> d 应该被禁用。 （的确如此）
一旦 输入 -> 选项 d 有一些值 选项 -> d 应该被启用。 （不会）
It works fine when I don't use any bootstrap. JSFiddle
当您使用 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>
这意味着用户看到的是无序列表而不是select选项，因此我们还必须更改class 和 无序列表中的属性 .
现在，如果您在 选项 D 值中输入内容，您必须删除所有 disabled class、aria-disable 属性并将 tabindex 值更改为 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>
在上面的代码片段中，它发生了我们预期的变化，但是 当我们点击按钮select选项。为此，我们也将在单击按钮时执行相同的操作。
$("[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>