自動啓用單選按鈕

Question

我有一個JavaScript代碼，我爲我的單選按鈕。我的頁面有三行，每行有三個不同的單選按鈕。我想拿出是當用戶在1號線點擊一個單選按鈕，喜歡控制線2和3單選按鈕的方式：

• 當我選擇無線電BTN＃1，將自動禁用第2行和第3行的廣播btn＃1。現在，如果我要改變第1行的選擇，比如選擇這個時間廣播btn＃2，它應該啓用第2行和第3行的廣播btn＃1。什麼是正確的方法做它？

$('.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的data attributes工作是做到這一點的最快捷的方式。只需爲每種按鈕添加一個具有唯一名稱和值的數據屬性（如「one」，「two」，「three」）並使用它來選擇按鈕（您也可以使用數據屬性和類，但是如果你不需要在該按鈕上運行其他任何東西，唯一的好處是稍微改進了可讀性）。

$('.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>

當我選擇無線電