Question

我需要对启用/禁用的复选框的值进行硬编码，具体取决于所选的选项值。我试图做这样的事情：

$("#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

但没有预期的效果，应该是这样的：

当我选择其他选项时，“财务”，复选框号。 3和4被禁用。
对于“财务”，所有复选框均已启用。

我需要根据复选框值执行此操作，而不仅仅是类。

Answer 1

您需要根据值过滤复选框，因此请使用$.fn.filter。目前，您使用$(".dissable").val("3")

设置其值

将匹配元素集合减少到与选择器匹配的元素或通过函数测试。

代码的

$("#Units").on("change", function () {
    //Filter checkboxes whose value is 3 or 4
    $(".dissable").filter(function(){ 
        return $(this).val() == 3 || $(this).val() == 4;
    }).prop("disabled", $(this).val() == "Finance");  //disable or enable based on condition
}).trigger('change');

DEMO

Answer 2

使用以下选择器：

[value='3']

$("#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');根据值创建选择。见工作示例：

＆＃13;

<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

＆＃13;

#Function - Discount for Buy 5 get 1 Free
def Generate_Discount1 ():
       if (entWindow1.get() != ""):
              price = 0.99
              free = 1
              DiscNo =  (int(entWindow1.get())+
                            int(entWindow2.get())+
                            int(entWindow3.get())+
                            int(entWindow4.get())+
                            int(entWindow5.get())+
                            int(entWindow6.get())+
                            int(entWindow7.get())+
                            int(entWindow8.get())+
                            int(entWindow9.get()))
              total_bought = float (price*DiscNo)
              total_free = float (price*free)
              return 0.2 / (total_bought / total_free)

＆＃13;

＆＃13; （小提琴：http://jsfiddle.net/2sw3q8p4/）

Answer 3

尝试使用缓存选择器上的.slice()缓存$(".dissable")

＆＃13;

function check() {}

var disable = $(".dissable");

$("#Units").on("change", function() {
  if ($(this).val() !== "Finance") {
    // disable `.dissable` at index `2,` `3`
    disable.slice(2, 4).prop("disabled", true);
  } else {
    // enable `.dissable` at index `2,` `3`
    disable.slice(2, 4).prop("disabled", false);
  }
}).trigger("change");

＆＃13;

<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

＆＃13;

根据其值和所选选项禁用/启用复选框

3 个答案: