HTML
<input type="checkbox" class='product' value=""/>1A
<input type="checkbox" class='product' value=""/>1B
<input type="checkbox" class='product' value=""/>1C
<input type="checkbox" class='product' value=""/>2A
<input type="checkbox" class='product' value=""/>2B
<input type="checkbox"class='product' value=""/>2C
jQuery
$(function(){
var $product = $('input.product');
$product.click(function() {
$product.filter(':checked').not(this).removeAttr('checked');
});
})
フィドル
OPからのコメントの後に追加
これは、 1A を選択した場合、1B と 1C もクリックできますが、2A、2B、2C はクリックできないというコメントの後のコードです*
HTML
<input type="checkbox" class='one' value=""/>1A
<input type="checkbox" class='one' value=""/>1B
<input type="checkbox" class='one' value=""/>1C<br/>
<input type="checkbox" class='two' value=""/>2A
<input type="checkbox" class='two' value=""/>2B
<input type="checkbox" class='two' value=""/>2C
jQuery
$(function(){
var $one= $('input.one');
$one.click(function() {
$one.filter(':checked').not(this).removeAttr('checked');
if($one.filter(':checked').length>0) {
$two.attr("disabled","disabled");
}
else {
$two.removeAttr("disabled");
}
});
var $two= $('input.two');
$two.click(function() {
$two.filter(':checked').not(this).removeAttr('checked');
if($two.filter(':checked').length>0) {
$one.attr("disabled","disabled");
}
else {
$one.removeAttr("disabled");
}
});
});
フィドル