Question

我创建了一个下拉菜单和几个复选框。复选框根据所选的下拉选项启用和禁用。

以下是代码：

<select id="Objective" form="theForm" name="category" >
    <option value="pi">Pipi</option>
    <option value="theta">thethaatha</option>
    <option value="sigma">sigmama</option>
</select>
<div>
    <input type="checkbox" class="dissable" onclick="check();" value="1" /> Teas<br>
    <input type="checkbox" class="dissable" onclick="check();" value="1" /> Capri<br>
    <input type="checkbox" class="dissable" onclick="check();" value="2" /> Kids <br>
    <input type="checkbox" class="dissable" onclick="check();" value="2" /> Food <br>
</div>

<script>
$("#Objective").on("change", function () {
    if ($(this).val() == "theta") {
        $(".dissable[value='1']").prop("disabled", true);
    } else if ($(this).val() == "pi") {
        $(".dissable[value='2']").prop("disabled", true);
    } else {
        //donothing
    }
}).trigger('change');
</script>

每当我从下拉菜单中选择pi时，它就变得很好，两个值=“2”的孩子和食物被禁用但是当我从每个复选框中选择theta时会被禁用，这不应该是这样的。只有值=“1”应该被禁用，即茶和卡普里。

帮助纠正它是什么代码问题。提前谢谢。

Answer 1

你需要在每个选择更改之间撤消，以便再次启用被禁用的那个，所以如果你在函数开头添加这两行，它将起作用

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

旁注，正如“Ezequias Dinella”在他的回答中所示，启用/禁用所有你也可以删除属性，如$（“。dissable”）。prop（“disabled”，true）;

样品

$("#Objective").on("change", function () {
    $(".dissable[value='1']").prop("disabled", false);
    $(".dissable[value='2']").prop("disabled", false);
  
    if ($(this).val() == "theta") {
        $(".dissable[value='1']").prop("disabled", true);
    } else if ($(this).val() == "pi") {
        $(".dissable[value='2']").prop("disabled", true);
    } else {
        //donothing
        $(".dissable[value='1']").prop("disabled", true);
        $(".dissable[value='2']").prop("disabled", true);
    }
}).trigger('change');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="Objective" form="theForm" name="category" >
    <option value="pi">Pipi</option>
    <option value="theta">thethaatha</option>
    <option value="sigma">sigmama</option>
</select>
<div>
<input type="checkbox" class="dissable" onclick="check();" value="1" /> Teas<br>
<input type="checkbox" class="dissable" onclick="check();" value="1" /> Capri<br>
<input type="checkbox" class="dissable" onclick="check();" value="2" /> Kids <br>
<input type="checkbox" class="dissable" onclick="check();" value="2" /> Food <br>
</div>

Answer 2

一种简单的方法是在禁用所选复选框之前启用所有复选框，以确保仅禁用所需的复选框;

// disabling some of them
$(".dissable[value='1']").prop("disabled", true);

然后你可以禁用选择的那些：

<tr ng-repeat="event in events">
     <td>{{event.jvmName}}</td>
     <td>{{event.dcpName}}</td>
     <td>{{event.status}}</td>
     <td ><a href="" ng-click="prodFunc(event.dcpName)">Check</a></td>
 </tr>

工作示例：http://codepen.io/anon/pen/bwJaEp?editors=1010

复选框启用基于下拉选项的禁用

2 个答案: