Jquery如果选择其中一个单选按钮,则禁用一组单选按钮?

时间:2012-01-25 18:58:59

标签: jquery button radio

在选择一个单选按钮时,我需要帮助编写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 

2 个答案:

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