Question

您能否请一看this demo，让我知道如何在每次用户点击任何仅禁用的复选框时将复选框的限制更改为3然后无限制？

第一步中的过程是，如果用户检查2项，则当用户点击任何已禁用的复选框时，其他复选框将被禁用，#opt-limit-3将显示，并提示用户增加限制或离开现在的情况？！如果Yes，那么我需要增加limit = 3

如何在禁用复选框上触发事件？
这不起作用：

$('input:checkbox:disabled').click(function(){ alert("hi"); });

我也试过

$("input:checkbox").not(":checked").attr("readonly", true);
$("input:checkbox").not(":checked").prop("readonly", true);

但现在可以检查所有复选框了！

下载演示：

var limit = 2;


$("input:checkbox").click(function() {
  var bol = $("input:checkbox:checked").length >= limit;
  $("input:checkbox").not(":checked").attr("disabled", bol);

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="well">
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
  </div>

  <div class="well hidden" id="opt-limit-3">
    You have reached the Max Items. Would You Like to Icrease to 3 Items
    <button class="btn btn-default" id="limitTo3" type="submit">Yes</button>
    <button class="btn btn-default" type="submit">No</button>
  </div>
  <div class="well hidden" id="opt-no-limit">
    You have reached the Max Items. Would You Like to Icrease to no limit Items
    <button class="btn btn-default" id="toNoLimit" type="submit">Yes</button>
    <button class="btn btn-default" type="submit">No</button>
  </div>
</div>

Answer 1

试试这个Demo

效果很好

var limit = 2;

    $("#opt-limit-3").hide();

$("input:checkbox").click(function() 
{
    if($(this).attr('isdisabled') == 'isdisabled')
        return false;

    $(".yo").html($("input:checkbox:checked").length + " ------ "+limit);
    if( $("input:checkbox:checked").length >=limit) 
    {    
        $("input:checkbox:not(:checked)").attr("isdisabled","isdisabled").on("mouseup",function()
        {
            $("#opt-limit-3").show();
        });

    }
});

$("#limitTo3").click(function()
{
    $("input:checkbox[isdisabled]").removeAttr("isdisabled").off("mouseup");
    limit+=3;
    $("#opt-limit-3").hide();
});

$("#limitTo3no").click(function()
{
    $("#opt-limit-3").hide();
});

如何通过禁用复选框上的单击事件来增加复选框的限制

1 个答案: