Auto Enable radio button

0
votes

I have a javascript code that I made for my radio buttons. My page has three lines, each with three different radio buttons. What I'd like to come up with is a way to control radiobuttons in line 2 and 3 when the user clicks a radio button in line 1, like:

  • when I select radio btn #1 it will automatically disable radio btn #1 in Line 2 and 3. Now if im going to change the selection in Line 1 like selecting this time radio btn #2, it should enable the radio btn #1 in Line 2 and 3. What is the right way to do it?

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

2 Answers

0
votes

You could use index of selected radio and disable all the other radio's with the same index, check example below.

Hope this helps.

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

Working with html's data attributes is the quickest way to do that. Simply add a data attribute with a unique name and a value for each kind of button (like "one", "two", "three") and use it to select the buttons (you could also use data attributes and classes, but if you don't need to run anything else on that buttons the only pro of that is a slightly improved readability).

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