自动启用单选按钮

Auto Enable radio button

本文关键字：单选按钮 启用      更新时间：2023-09-26

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

  • 当我选择电台btn #1时，它将自动禁用电台btn #1在第2行和第3行。现在，如果我要改变第一行中的选择，比如这次选择radio btn #2，它应该在第2行和第3行中启用radio 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>

您可以使用所选无线电的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>

使用html的数据属性是最快的方法。只需为每种按钮(如"one"，"two"，"three")添加一个具有唯一名称和值的data属性，并使用它来选择按钮(您也可以使用data属性和类，但如果您不需要在这些按钮上运行任何其他内容，那么唯一的好处是稍微提高了可读性)。

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

相关文章：