根据其值和所选选项禁用/启用复选框 [英] Disable/enable checkboxes based on its values and selected option

问题描述

我需要对已启用/禁用的复选框的值进行硬编码，具体取决于所选的选项值.我正在尝试做这样的事情:

I need to hardcode those of the values of the checkboxes which are enabled/disabled, depending on the selected option value. I was trying to do something like 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, which is supposed to be like this:

• 当我选择财务"之外的其他选项时，请选中复选框. 3和4被禁用.
• 对于财务"，启用了所有复选框.

我需要基于复选框值(不仅是类)来执行此操作.

I need to do this based on the checkbox values, not only class.

推荐答案

使用以下选择器:

$(".dissable[value='3']").prop("disabled", true);

[value='3']基于该值创建选择.参见工作示例:

The [value='3'] creates a selection based on the 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

(小提琴: http://jsfiddle.net/2sw3q8p4/)

这篇关于根据其值和所选选项禁用/启用复选框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！