如何在jQuery中的互斥複選框上實現點擊事件？

我有兩個複選框：如何在jQuery中的互斥複選框上實現點擊事件？

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

所以，如果「內部」複選框被選中，在文字區域將被啓用，如果它不檢查， 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 
    }); 
});

但這只是拋出一個循環瀏覽器，因爲這兩個不同的點擊事件，最終調用對方。

如何保持我的互斥代碼，同時仍然允許「內部」複選框的啓用/禁用代碼工作？

來源

2012-04-19 croceldon

而不是'$（本）.attr（ '身份證'）'，你可以簡單地使用'this.id'獲取元素的'id'屬性。 – 2012-04-19 15:16:45

如果你想讓複選框互斥，爲什麼不使用單選按鈕？ – georg 2012-04-19 15:20:06

我不會使用單選按鈕，因爲會出現不選任何內容的情況，而且我不想添加像'N/A'或類似的單選按鈕。 – croceldon 2012-04-19 16:59:49

您可以創建一個自定義事件所觸發的，當你點擊上#application_inside。當您因排他性而取消選中其他複選框時，您也會觸發此自定義事件。

下面是一個例子：http://jsfiddle.net/gs78t/2/

來源

2012-04-19 15:50:34

你可以嘗試這樣的事情

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-19 15:22:20 jbl

如何在jQuery中的互斥複選框上實現點擊事件？

回答

相關問題