自动启用单选按钮

Question

我有一个为单选按钮编写的javascript代码。 我的页面有三行，每行都有三个不同的单选按钮。 我想想的是一种当用户单击第1行中的单选按钮时控制第2行和第3行中的单选按钮的方法：

• 当我选择广播btn＃1时，它将自动禁用第2行和第3行中的广播btn＃1。现在，如果即时通讯要更改第1行中的选择（如选择这次广播btn＃2），则应启用广播btn＃1。第2行和第3行。正确的方法是什么？

  $('.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 if(this.value == 'Bk1' && this.checked){ $('input[value=Bk2], input[value=Bk3]').prop('disabled', true); } else if(this.value == 'Bk2' && this.checked){ $('input[value=Bk1], input[value=Bk3]').prop('disabled', true); } else if(this.value == 'Bk3' && this.checked){ $('input[value=Bk1], input[value=Bk2]').prop('disabled', true); } else if(this.value == 'Test1' && this.checked){ $('input[value=Test2], input[value=Test3]').prop('disabled', true); } else if(this.value == 'Test2' && this.checked){ $('input[value=Test1], input[value=Test3]').prop('disabled', true); } else if(this.value == 'Test3' && this.checked){ $('input[value=Test1], input[value=Test2]').prop('disabled', true); } else{ $('.Session').not(this).prop('checked', false).prop('disabled', false); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <label> Line 1 </label> <div class="input-group"> <input name="session1" class="Session" type="radio" value="Bk1">1 <input name="session1" class="Session" type="radio" value="One1">2 <input name="session1" class="Session" type="radio" value="Test1">3 </div> <label> Line 2 </label> <div class="input-group"> <input name="session2" class="Session" type="radio" value="Bk2">1 <input name="session2" class="Session" type="radio" value="One2">2 <input name="session2" class="Session" type="radio" value="Test2">3 </div> <label> Line 3 </label> <div class="input-group"> <input name="session3" class="Session" type="radio" value="Bk3">1 <input name="session3" class="Session" type="radio" value="One3">2 <input name="session3" class="Session" type="radio" value="Test3">3 </div> 

Answer 1

您可以使用所选电台的index ，并disable具有相同索引的所有其他radio ，请查看下面的示例。

希望这可以帮助。

 $('.Session').click(function(){ var checkbox_index = $(this).index(); $('.input-group').each(function(){ $('input:eq('+checkbox_index+')', this).prop('disabled',true); }) $(this).prop('disabled',false); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <label> Line 1 </label> <div class="input-group"> <input name="session1" class="Session" type="radio" value="Bk1">1 <input name="session1" class="Session" type="radio" value="One1">2 <input name="session1" class="Session" type="radio" value="Test1">3 </div> <label> Line 2 </label> <div class="input-group"> <input name="session2" class="Session" type="radio" value="Bk2">1 <input name="session2" class="Session" type="radio" value="One2">2 <input name="session2" class="Session" type="radio" value="Test2">3 </div> <label> Line 3 </label> <div class="input-group"> <input name="session3" class="Session" type="radio" value="Bk3">1 <input name="session3" class="Session" type="radio" value="One3">2 <input name="session3" class="Session" type="radio" value="Test3">3 </div> 

Answer 2

使用html的数据属性是最快的方法。 只需为每种按钮（例如“一个”，“两个”，“三个”）添加具有唯一名称和值的数据属性，然后使用它来选择按钮（您也可以使用数据属性和类，但是如果您无需在该按钮上运行其他任何操作，唯一的好处就是可读性得到了稍微提高。

 $('.Session').click(function(){ if(this.checked){ var clicked = $(this); var position = clicked.data('radio-position'); $('.input-group input').prop('disabled',false); $('.input-group').find('[data-radio-position=' + position + ']').each(function(radio){ if(radio != clicked){ $(radio).prop('disabled', true); $(radio).prop('checked', false); } }); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <label> Line 1 </label> <div class="input-group"> <input name="session1" class="Session" type="radio" data-radio-position="one" value="Bk1">1 <input name="session1" class="Session" type="radio" data-radio-position="two" value="One1">2 <input name="session1" class="Session" type="radio" data-radio-position="three" value="Test1">3 </div> <label> Line 2 </label> <div class="input-group"> <input name="session2" class="Session" type="radio" data-radio-position="one" value="Bk2">1 <input name="session2" class="Session" type="radio" data-radio-position="two" value="One2">2 <input name="session2" class="Session" type="radio" data-radio-position="three" value="Test2">3 </div> <label> Line 3 </label> <div class="input-group"> <input name="session3" class="Session" type="radio" data-radio-position="one" value="Bk3">1 <input name="session3" class="Session" type="radio" data-radio-position="two" value="One3">2 <input name="session3" class="Session" type="radio" data-radio-position="three" value="Test3">3 </div>