选择框选项禁用/启用在 jQuery 中不起作用

Question

我有两个带有一些依赖条件的选择框。 当我选择大于 8 级时需要启用所有选项。 但它不起作用

 function enableolympiads(gradeid) { var gradeval = $("#levels" + gradeid + " option:selected").val(); if (gradeval > 0 && (gradeval == 8 || gradeval == 9 || gradeval == 10)) { alert(gradeval); jQuery("#olympiads" + gradeid + " option:contains('3')").removeAttr('disabled'); jQuery("#olympiads" + gradeid + " option:contains('4')").removeAttr('disabled'); } else { jQuery("#olympiads" + gradeid + " option:contains('3')").attr('disabled'); jQuery("#olympiads" + gradeid + " option:contains('4')").attr('disabled'); } }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <select class="form-control" name="levels[]" id="levels1" onchange="enableolympiads(1)" required> <option value="">Select</option> <option value="1">level 1</option> <option value="2">level 2</option> <option value="3">level 3</option> <option value="4">level 4</option> <option value="5">level 5</option> <option value="6">level 6</option> <option value="7">level 7</option> <option value="8">level 8</option> <option value="9">level 9</option> <option value="10">level 10</option> </select> <select class="form-control" name="olympiads[0][]" id="olympiads1" multiple required> <option value="1"> English </option> <option value="2"> Maths </option> <option value="3" disabled> Science </option> <option value="4" disabled> AI </option> </select>

Answer 1

这个选择器：

option:contains('3') 

查看选项的文本，而不是值。

改成

option[value=3]

 function enableolympiads(gradeid) { var gradeval = $("#levels" + gradeid + " option:selected").val(); if (gradeval > 0 && (gradeval == 8 || gradeval == 9 || gradeval == 10)) { console.log(gradeval); jQuery("#olympiads" + gradeid + " option[value=3]").removeAttr('disabled'); jQuery("#olympiads" + gradeid + " option[value=4]").removeAttr('disabled'); } else { jQuery("#olympiads" + gradeid + " option[value=3]").attr('disabled', 'disabled'); jQuery("#olympiads" + gradeid + " option[value=4]").attr('disabled', 'disabled'); } }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <select class="form-control" name="levels[]" id="levels1" onchange="enableolympiads(1)" required> <option value="">Select</option> <option value="1">level 1</option> <option value="2">level 2</option> <option value="3">level 3</option> <option value="4">level 4</option> <option value="5">level 5</option> <option value="6">level 6</option> <option value="7">level 7</option> <option value="8">level 8</option> <option value="9">level 9</option> <option value="10">level 10</option> </select> <select class="form-control" name="olympiads[0][]" id="olympiads1" multiple required> <option value="1"> English </option> <option value="2"> Maths </option> <option value="3" disabled> Science </option> <option value="4" disabled> AI </option> </select>

Answer 2

少写，实现更多 :)

 function enableolympiads(gradeid) { var gradeval = $("#levels" + gradeid).val(); if (gradeval >= 8) { $("#olympiads" + gradeid + " option").filter("[value = 3], [value = 4]").removeAttr('disabled'); } else { $("#olympiads" + gradeid + " option").filter("[value = 3], [value = 4]").attr('disabled', true); } }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <select class="form-control" name="levels[]" id="levels1" onchange="enableolympiads(1)" required> <option value="">Select</option> <option value="1">level 1</option> <option value="2">level 2</option> <option value="3">level 3</option> <option value="4">level 4</option> <option value="5">level 5</option> <option value="6">level 6</option> <option value="7">level 7</option> <option value="8">level 8</option> <option value="9">level 9</option> <option value="10">level 10</option> </select> <select class="form-control" name="olympiads[0][]" id="olympiads1" multiple required> <option value="1"> English </option> <option value="2"> Maths </option> <option value="3" disabled> Science </option> <option value="4" disabled> AI </option> </select>