weird bug on radio buttons when change

Question

i'm trying to do a radio button with 2 options: yes and no (is a long form), but in this piece, i need that radio called refused or accomplished be checked when the user choose yes or no, refused and accomplished buttons already are disabled, the user can't change this manually.

1 - when user choose yes: accomplished must be checked 2 - if user choose no, refused must be checked. 3 - if user change the yes to no, or no to yes option we back to the rules 1 or 2 above.

however, i'm stuck because when i change the option the radio button change only once. and nothing happens after that.

this is my code right now: https://jsfiddle.net/bw21cxo5/1/

HTML:

<div>
  <label for="yes">
    <input type="radio" name="radio1" value="yes" id="yes" class="option-yes">Yes
  </label>
  <label for="no">
    <input type="radio" name="radio1" value="no" id="no" class="option-no">No
  </label>
</div>
<br><br>
<div>
  <label for="refused">
    <input type="radio" name="radio2" id="refused" disabled> Refused
  </label>
  <label for="accomplished">
    <input type="radio" name="radio2" id="accomplished" disabled> Accomplished
  </label>
</div>

js: (jquery 2.2)

$('input[name="radio1"]').on('change', function() {

  if ($(this).hasClass('option-no')) {
    $('#refused').attr('checked', true);
    $('#accomplished').attr('checked', false);
  } else {
    $('#accomplished').attr('checked', true);
    $('#refused').attr('checked', false);
  }
});

Use `prop` instead of `attr` – Karl-André Gagnon Mar 11 '16 at 14:53 — Karl-André Gagnon, Mar 11 '16 at 14:53

score 2 · Answer 1 · answered Mar 11 '16 at 14:54

You can associate the checkboxes with each other. Something like this using the data attribute would work:

Updated HTML

<label for="yes">
    <input type="radio" name="radio1" value="yes" id="yes" class="option-yes" data-partner="accomplished">Yes
</label>
<label for="no">
    <input type="radio" name="radio1" value="no" id="no" class="option-no" data-partner="refused">No
</label>

JavaScript

$('input[name="radio1"]').on('change', function() {
    $('input[name="radio2]').prop('checked',false);
  $('#'+$(this).data('partner')).prop('checked',true);
});

JS Fiddle: https://jsfiddle.net/igor_9000/bw21cxo5/3/

Hope that helps!

score 1 · Answer 2 · edited May 23 '17 at 12:15

1

It's better to use plain JS when checking radio buttons.

Try this:

$('input[name="radio1"]').on('change', function() {

  if ($(this).hasClass('option-no')) {
    $('#refused').get(0).checked = true;
  } else {
    $('#accomplished').get(0).checked = true;
  }
});

The problem with your code is instead of attr you should have used prop. Here is the difference between them.

Demo

edited May 23 '17 at 12:15

Community

1
1

answered Mar 11 '16 at 14:53

XCS

27,244
26
101
151

score 1 · Accepted Answer · answered Mar 11 '16 at 14:57

Your code works enough, only a little fix:

$(function () {
  $('input[name="radio1"]').on('change', function() {
    if ($(this).hasClass('option-no')) {
      $('#refused').prop('checked', true);
    } else {
      $('#accomplished').prop('checked', true);
    }
  });
});

<script src="http://code.jquery.com/jquery-2.2.0.min.js"></script>


<div>
    <label for="yes">
        <input type="radio" name="radio1" value="yes" id="yes" class="option-yes">Yes
    </label>
    <label for="no">
        <input type="radio" name="radio1" value="no" id="no" class="option-no">No
    </label>
</div>
<br><br>
<div>
    <label for="refused">
        <input type="radio" name="radio2" id="refused" disabled> Refused
    </label>
    <label for="accomplished">
        <input type="radio" name="radio2" id="accomplished" disabled> Accomplished
    </label>
</div>

weird bug on radio buttons when change

3 Answers3