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

How to implement a click event on mutually exclusive checkboxes in jQuery?

本文关键字：复选框 实现 单击 事件 jQuery      更新时间：2023-09-26

我有两个复选框：

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

因此，如果选中"内部"复选框，则将启用文本区域，如果未选中，则应禁用文本区域。

问题是，如果选中了"内部"复选框，

然后用户选中了"外部"复选框，则"内部"将变为未选中状态（应该如此），但文本区域仍处于启用状态。 这似乎是因为用户从未实际单击过"内部"复选框。

我尝试使用以下方法解决此问题：

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

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

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

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

下面是一个示例：http://jsfiddle.net/gs78t/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
   });
});
相关文章：