自動啟用單選按鈕

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>