Changing the value of radio button at run time

Question

I have something like this:

<input type="radio" value="1" name="rdo" id="rdo_1" checked="checked" />Yes
<input type="radio" value="0" name="rdo" id="rdo_0" />No

And on some DropDown index change I try to set the rdo_1 to Yes. And make them both disabled.

But for some reason it is not setitng the radio button to True for first one.

What Am I Doing Wrong?

Here is How I did it:

$("input:radio[name='rdo']:checked").val('1');
$("input:radio[id='rdo_1']:checked").val('1');
$('#rdo_1').attr('disabled', true);
$('#rdo_0').attr('disabled', true);

If you mention a drop down, it would be good to include that as well. — Erik Philips, Oct 24 '17 at 21:00

Erik Philips · Answer 1 · 2017-10-24T20:50:48.430

1

Use jQuery's Prop

$(document).ready(function(){
  $('input[type=button]').on('click', function(){
    var target = $(this).data('target');
    $(target).prop('checked', true);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" value="1" name="rdo" id="rdo_1" checked="checked" />Yes
<input type="radio" value="0" name="rdo" id="rdo_0" />No
</br>
</br>
<input type="button" data-target="#rdo_1" value="Yes"/>
<input type="button" data-target="#rdo_0" value="No"/>

What's wrong with my own code?

None of the code you have presented is modifying the checked attribute.

.val('1')

Changes the value="" attribute.

Also what is .data('target')

jQuery's .data() gets the value of data- attributes.

with

data-blah="asdf";

therefore

.data('blah') == "asdf";

edited Oct 24 '17 at 20:50

answered Oct 24 '17 at 20:42

Erik Philips

53,428
11
128
150

Also what is .data('target') – Oct 24 '17 at 20:46
None of your code is modifying the *checked* attribute? – Erik Philips Oct 24 '17 at 20:46
@Travolta Check out https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/data-* to read more about `data` attributes – blackandorangecat Oct 24 '17 at 20:49
1

@blackandorangecat your link is 404 my friend. – Erik Philips Oct 24 '17 at 20:55
@ErikPhilips Whups. Looks like it cut off the asterisk at the end. `https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/data-*` – blackandorangecat Oct 24 '17 at 20:59

blackandorangecat · Accepted Answer · 2017-10-24T21:28:21.040

0

EDIT: You have disabled the radio buttons so that they can only be set via drop-down, etc; however, this causes problems because only enabled elements are submitted with the form. Here is a SO question that gives a dirty work around. It will take the input from radio buttons and do nothing with them. I've added it to my fiddle.

$(':radio').click(function(){ return false; });

Here is how to do it with a drop down box. You need to change the radio button to use prop (property) instead of val.

$("#dropdown").on("change", function() {
  //Get the value of the dropdown box
  var dropDownVal = $(this).val();
  
  if (dropDownVal == 0) {
    //If the first drop down option was selcted
    $("#rdo_1").prop("checked", true);
    
  } else if (dropDownVal == 1) {
     //If the second drop down option was selcted
    $("#rdo_0").prop("checked", true);
  } else{
    //If the third drop down option was selcted
    $("#rdo_1").prop("checked", false);
    $("#rdo_0").prop("checked", false);
  }

});

//Disable the radio buttons - crude
$(':radio').click(function(){
    return false;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id='dropdown'>
  <option value="0">YES</option>
  <option value="1">NO</option>
  <option value="2">CLEAR</option>
</select>

<input type="radio" value="1" name="rdo" id="rdo_1" checked='checked' />Yes
<input type="radio" value="0" name="rdo" id="rdo_0" />No

edited Oct 24 '17 at 21:28

answered Oct 24 '17 at 20:47

blackandorangecat

1,246
5
18
37

No need for an if statement... `prop("checked", $(this).val() == 0)`. – Erik Philips Oct 24 '17 at 20:51
@ErikPhilips I'm not sure I follow. My code was an example off how to use the values from a drop-down to set the value of radio button. What do the above comment do? – blackandorangecat Oct 24 '17 at 20:57
You have duplicate code because you have an if statement. If you place the if logic directly into the prop method, it reduces code. **OH wait nevermind**. – Erik Philips Oct 24 '17 at 20:59
so I don't need 'rdo' that was the name of both of radio buttons at all ? and this will SAVE correctly when form submits ? – Oct 24 '17 at 21:05
Well in my own testing before posting the question I had tried$('#rdo1').prop('checked', true); too .. it DOES select it . but does NOT SAVE when form posts. – Oct 24 '17 at 21:08
@Travolta Oh, wait, you are disabling the radio buttons. Disabled HTML elements will not be submitted with the form – blackandorangecat Oct 24 '17 at 21:15
@blackandorangecat yes requirements need me to disable them too. . So what to do now? – Oct 24 '17 at 21:26
@Travolta Look at my edit above. Radio buttons do not support the `readonly` property - you will have to tweak your html or your requirements. – blackandorangecat Oct 24 '17 at 21:29
Thanks, for readonly part I will probably use this trick: https://stackoverflow.com/questions/1953017/why-cant-radio-buttons-be-readonly – Oct 24 '17 at 21:32

Changing the value of radio button at run time

2 Answers2