Question

我有一个我的单选按钮的javascript代码。我的页面有三行，每行有三个不同的单选按钮。我想提出的是当用户点击第1行中的单选按钮时控制第2行和第3行中的radiobuttons的方法，如：

当我选择无线电btn＃1时，它将自动禁用第2行和第3行中的无线电btn＃1。现在，如果我要更改第1行中的选择，如选择此时间无线电btn＃2，则应启用无线电btn第2行和第3行中的＃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使用相同的索引，请查看以下示例。

希望这有帮助。

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

使用html＆＃39; data attributes是最快的方法。只需为每种按钮添加一个具有唯一名称和值的数据属性（例如＆＃34;一个＆＃34;，＆＃34;两个＆＃34;，＆＃34;三个＆＃34;）并使用它来选择按钮（你也可以使用数据属性和类，但如果你不需要在那些按钮上运行任何其他东西，那么唯一的专业就是略微提高了可读性）。

＆＃13;

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

＆＃13;

<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>

＆＃13;

自动启用单选按钮

2 个答案: