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

我有两个复选框：

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

这个很好用。但我还想在“内部”复选框中添加额外的单击功能。我希望它启用/禁用同一表单上的文本区域，因此我已完成以下操作：

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

因此，如果选中“inside”（内部）复选框，则将启用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
   });
});

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

---

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

您可以尝试类似的方法

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

---

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

---

下面是一个示例：

而不是

$（this.attr（'id'）

，您可以简单地使用

this.id

来获取元素的

id

属性。如果您希望复选框互斥，为什么不使用单选按钮呢？我不会使用单选按钮，因为在某些情况下不会选择任何内容，我不想添加“N/a”或类似的单选按钮。

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