Question

有没有办法模拟Javascript中存在复选框的可能状态？我目前有3个复选框。 TakeDown，Ban和不适用。如果选择了删除或禁止，则必须禁用“不适用”复选框。如果选择了Notapplicable，则应禁用删除和禁用复选框。

我目前的工作方式如下：

但是，我想知道是否有更好的方法来做到这一点。如果这扩展到更多选项，条件的数量可能有点疯狂。

HTML：

<div id ="possibleDecisions">
    <table>
        <tbody>
            <tr>
                <th>Actions</th>
            </tr>
            <tr>
                <td>
                    <div>
                        <label>
                            <input type="checkbox" id="TakeDown">
                                <span>Take Down</span>
                            </input>
                        </label>
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    <div>
                        <label>
                            <input type="checkbox" id="Ban">
                                <span>Ban</span>
                            </input>
                        </label>
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    <div>
                        <label>
                            <input type="checkbox" id="Notapplicable">
                                <span>Not applicable</span>
                            </input>
                        </label>
                    </div>
                </td>
            </tr>
        </tbody>
    </table>
</div>

JS：

$(document).ready(function () {
    $("#possibleDecisions").delegate("table", "click", function (elem) {
        var takeDownCheckValue = $(this).find('#TakeDown').is(':checked');
        var banCheckValue = $(this).find('#Ban').is(':checked');
        var notApplicableCheckValue = $(this).find('#Notapplicable').is(':checked');

        if (takeDownCheckValue === true || banCheckValue === true) {
            $(this).find('#Notapplicable').prop("disabled", true);
        }

        if (takeDownCheckValue === false && banCheckValue === false) {
            $(this).find('#Notapplicable').prop("disabled", false);
        }

        if (notApplicableCheckValue === true) {
            $(this).find('#TakeDown').prop("disabled", true);
            $(this).find('#Ban').prop("disabled", true);
        }

        if (notApplicableCheckValue === false) {
            $(this).find('#TakeDown').prop("disabled", false);
            $(this).find('#Ban').prop("disabled", false);
        }
    });
});

Answer 1

$(function() {
    $("#Ban,#TakeDown,#Notapplicable").click(function() {
      if($(this).attr("id")=="Notapplicable") 
        $("#Ban,#TakeDown").prop("disabled", $(this).prop("checked"));
      else
        $("#Notapplicable").prop("disabled", $("#Ban").prop("checked")||$("#TakeDown").prop("checked"));
      });
});

演示：http://jsbin.com/hogafenigi/edit?js

Answer 2

$( document ).ready(function() {

    $("input").click(function(event) {
      var current_id = event.target.id;
      if(current_id == "Notapplicable"){
        if($("#"+current_id).is(":checked") == true){
          $("input").prop("disabled",true);
          $("#Notapplicable").prop("disabled",false);
        }else{
          $("input").prop("disabled",false);
        }
      }
      else{
        if($("#"+current_id).is(":checked") == true){
          $("input").prop("disabled",false);
          $("#Notapplicable").prop("disabled",true);
        }else{
          $("input").prop("disabled",false);
        }
      }
      console.log(current_id);
      
 		});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id ="possibleDecisions">
<table>
<tbody>
<tr>
<th>Actions</th>
</tr>
<tr>
<td>
<div>
<label>
<input type="checkbox" id="TakeDown">
<span>Take Down</span>
</label>
</div>
</td>
</tr>
<tr>
<td>
<div>
<label>
<input type="checkbox" id="Ban">
<span>Ban</span>
</label>
</div>
</td>
</tr>
<tr>
<td>
<div>
<label>
<input type="checkbox" id="Notapplicable">
<span>Not applicable</span>
</label>
</div>
</td>
</tr>
</tbody>
</table>
</div>

模型复选框值的可能状态

2 个答案: