Select box Options disable / Enable not working in jQuery

Question

I have two select boxes with some dependency conditions. when I select greater than level 8 need to enable all options. but it's not working

 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

This selector:

option:contains('3') 

looks at the text of the option, not the value.

Change to

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

Write less, achieve more :)

 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>