0

我有两个复选框：

<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);
   });
});

这工作正常。但我还想在“内部”复选框中添加额外的点击功能。我希望它在同一个表单上启用/禁用文本区域，所以我这样做了：

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

因此，如果选中“内部”复选框，则将启用 textarea，如果未选中，则应禁用 textarea。

问题是，如果选中了“内部”复选框，然后用户选中了“外部”复选框，则“内部”将变为未选中（应该如此），但 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
   });
});

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

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

4

2 回答 2

1

您可以创建在单击#application_inside时触发的自定义事件。此外，由于排他性，当您取消选中其他框时，您将触发此自定义事件。

这是一个例子：http: //jsfiddle.net/gs78t/2/

于 2012-04-19T15:50:34.173 回答
0

你可以试试这样的

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
   });
});
于 2012-04-19T15:22:20.063 回答