Question

我有两个复选框：

<input id="outside" type="checkbox" value="1" data-gid="41820122" />
<input id="inside" type="checkbox" value="1" data-gid="41820122" />

我让他们互相排斥：

$(function(){
  //mutually exclusive checkboxes
  $("input[data-gid]").click(function(){
    var gid = $(this).attr('data-gid');
    var fid = $(this).attr('id');
    var checkboxes = $("input[data-gid=" + gid + "][id!=" + fid + "]");
    checkboxes.attr("checked", false);
   });
});

这很好用。但我还想在“内部”复选框中添加额外的点击功能。我希望它在同一个表单上启用/禁用textarea，所以我已经这样做了：

$('#application_inside').click(function() {
        if ($(this).is(':checked')) {
          return $('textarea').removeAttr('disabled');
        } else {
          return $('textarea').attr('disabled', 'disabled');
        }
 });

因此，如果选中'inside'复选框，则会启用textarea，如果未选中，则应禁用textarea。

问题是如果选中'inside'复选框，然后用户检查'outside'复选框，则'inside'将被取消选中（应该是），但textarea仍保持启用状态。这似乎是因为“内部”复选框从未被用户实际点击过。

我尝试过以下方法解决这个问题：

$(function(){
  //mutually exclusive checkboxes
  $("input[data-gid]").click(function(){
    var gid = $(this).attr('data-gid');
    var fid = $(this).attr('id');
    var checkboxes = $("input[data-gid=" + gid + "][id!=" + fid + "]");
    checkboxes.attr("checked", false);
    checkboxes.triggerHandler("click"); //new code to fire any click code associated with unchecked boxes
   });
});

但这只是将浏览器抛入循环，因为两个不同的点击事件最终会相互调用。

如何在仍然允许“内部”复选框的启用/禁用代码工作的同时保留我的互斥代码？

Answer 1

您可以创建在 #application_inside 上点击时触发的自定义事件。此外，当您取消选中其他框时，您将触发此自定义事件，因为它具有排他性。

以下是一个示例：http://jsfiddle.net/gs78t/2/

Answer 2

你可以尝试这样的事情

var insideChanged = function() {
    if ($('#inside').is(':checked')) {
      return $('textarea').removeAttr('disabled');
    } else {
      return $('textarea').attr('disabled', 'disabled');
    }
};

$('#application_inside').click(insideChanged);

$(function(){
  //mutually exclusive checkboxes
  $("input[data-gid]").click(function(){
   var gid = $(this).attr('data-gid');
    var fid = $(this).attr('id');
    var checkboxes = $("input[data-gid=" + gid + "][id!=" + fid + "]");
    checkboxes.attr("checked", false);
    insideChanged(); //new code to fire any click code associated with unchecked boxes
   });
});

如何在jQuery中的互斥复选框上实现click事件？

2 个答案: