在选择一个单选按钮时,我需要帮助编写Jquery来禁用一组单选按钮吗?
1)如果选择了值为“One1”的单选按钮,则禁用其他带有“One2”和“One3”的单选按钮。选择“Bk1”将再次启用它们。
2)如果选择了值为“One2”的单选按钮,则禁用其他带有“One1”和“One3”的单选按钮。选择“Bk2”将再次启用它们。
3)如果选择了值为“One3”的单选按钮,则禁用其他带有“One1”和“One2”的单选按钮。选择“Bk3”将再次启用它们。
<input name="session1" class="Session" type="radio" value="Bk1">Break Out
<input name="session1" class="Session" type="radio" value="One1">One-on-One Consulting
<input name="session2" class="Session" type="radio" value="Bk2">Break Out
<input name="session2" class="Session" type="radio" value="One2">One-on-One Consulting
<input name="session3" class="Session" type="radio" value="Bk3">Break Out
<input name="session3" class="Session" type="radio" value="One3">One-on-One Consulting
答案 0 :(得分:2)
试试这个
$('.Session').click(function(){
if(this.value == 'One1' && this.checked){
console.log($('input[value=One2], input[value=One3'));
$('input[value=One2], input[value=One3]').prop('disabled', true);
}
else if(this.value == 'One2' && this.checked){
$('input[value=One1], input[value=One3]').prop('disabled', true);
}
else if(this.value == 'One3' && this.checked){
$('input[value=One1], input[value=One2]').prop('disabled', true);
}
else{
$('.Session').not(this).prop('checked', false).prop('disabled', false);
}
});
<强> Demo 强>
答案 1 :(得分:1)
我必须在HTML标记中添加一些类,但这是您要查找的内容(jsFiddle)吗?
<div>
<input name="session1" class="Session breakout" type="radio" value="Bk1">Break Out
<input name="session1" class="Session consulting" type="radio" value="One1">One-on-One Consulting
</div>
<div>
<input name="session2" class="Session breakout" type="radio" value="Bk2">Break Out
<input name="session2" class="Session consulting" type="radio" value="One2">One-on-One Consulting
</div>
<div>
<input name="session3" class="Session breakout" type="radio" value="Bk3">Break Out
<input name="session3" class="Session consulting" type="radio" value="One3">One-on-One Consulting
</div>
$(document).ready(function(){
$('.consulting').click(function(){
$('.Session[name!="' + $(this).attr('name') + '"]').attr('disabled', '');
});
$('.breakout').click(function(){
$('.Session').removeAttr('disabled');
});
});