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