JQuery將事件設置爲複選框已選中/未選中

Question

<input type="checkbox" name="Rates">Rates<br /> 
<input type="checkbox" name="RatesSpecific">Rates (All-In-Rate, PV01)<br /> 

這些需要保留複選框（因爲不止這兩個）。但是，如何設置一個JQuery事件，以便一次只檢查其中的一個，並在另一個檢查時灰掉另一個JQuery事件？

Answer 1

這使複選框元素像一個單選按鈕，但他們需要是兄弟元素。

$("input[type=checkbox]").change(function(){ 
    if($(this).prop('checked')){ 
    $(this).siblings("input[type=checkbox]").prop('checked', false); 
    } 
}); 

也許你應該考慮使用單選按鈕？

Answer 2

看看這個小提琴頁：http://jsfiddle.net/h682v/1/

我已經把幾個例子在那裏基於的另一種狀態，包括禁止之一。

請注意，一部分基於其他人取消選中（任務取消選中禁用底部複選框並取消選中底部複選框），而另一部分僅禁用。檢查所有的頂部（*任務），然後底部兩個是活動的。

在這一個：http://jsfiddle.net/h682v/2/它也取消選中最後一個，並取消選中任何前一個時禁用它。

編輯：請注意，我這樣做，如果你添加更多的複選框，他們得到正確處理 - 希望這將有助於給你說你有「其他」複選框以及。

Answer 3

給他們一個ID屬性，然後使用

$(function() { 
    $("#rates").change(function() { 
    updateCheckBoxes(); 
    }); 

    $("#ratesSpecific").change(function() { 
    updateCheckBoxes(); 
    }); 
}); 

function updateCheckBoxes() { 
    if ($("#rates").val()) { 
    $("#ratesSpecific").attr("disabled", "disabled"); 
    } else { 
    $("#ratesSpecific").removeAttr("disabled"); 
    } 

    if ($("#ratesSpecific").val()) { 
    $("#rates").attr("disabled", "disabled"); 
    } else { 
    $("#rates").removeAttr("disabled"); 
    } 
}