javascript - Disable/enable checkboxes based on its values and selected option -
i need hardcode of values of checkboxes enabled/disabled, depending on selected option value. trying this:
$("#units").on("change", function () { if ($(this).val() !== "finance") { $(".dissable").val("3").prop("disabled", true); $(".dissable").val("4").prop("disabled", true); } else { $(".dissable").val("3").prop("disabled", false); $(".dissable").val("4").prop("disabled", false); } }).trigger('change');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <select id="units"> <option value="marketing" > marketing </option> <option value="finance" > finance </option> <option value="operations" > operations </option> </select> <input type="checkbox" class="dissable" onclick="check();" value="1"> chbx1 <input type="checkbox" class="dissable" onclick="check();" value="2"> chbx2 <input type="checkbox" class="dissable" onclick="check();" value="3"> chbx3 <input type="checkbox" class="dissable" onclick="check();" value="4"> chbx4
but no desired effect, supposed this:
- when choose option other "finance", checkbox no. 3 , 4 disabled.
- for "finance", checkboxes enabled.
i need based on checkbox values, not class.
use following selector:
$(".dissable[value='3']").prop("disabled", true);
the [value='3']
creates selection based on value. see working example:
$("#units").on("change", function () { if ($(this).val() !== "finance") { $(".dissable[value='3']").prop("disabled", true); $(".dissable[value='4']").prop("disabled", true); } else { $(".dissable[value='3']").prop("disabled", false); $(".dissable[value='4']").prop("disabled", false); } }).trigger('change');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <select id="units"> <option value="marketing" > marketing </option> <option value="finance" > finance </option> <option value="operations" > operations </option> </select> <input type="checkbox" class="dissable" onclick="check();" value="1" /> chbx1 <input type="checkbox" class="dissable" onclick="check();" value="2" /> chbx2 <input type="checkbox" class="dissable" onclick="check();" value="3" /> chbx3 <input type="checkbox" class="dissable" onclick="check();" value="4" /> chbx4
Comments
Post a Comment