CODEWITHSUNDEEP
jqueryhtmltwitter-bootstrap-3radio-button
roncsak
roncsak

Reputation: 618

Why does input type radio does not work without clicking on it?

I'm using Bootstrap and I have a radio button group that works weird. Here is the markup:

<div class="btn-group custom-btn-group" data-toggle="buttons">
  <label class="btn btn-default active">
    <input type="radio" class="form-control" name="feature_enabled" value="1"> Enabled
  </label>
  <label class="btn btn-default">
    <input type="radio" class="form-control" name="feature_enabled" value="0"> Disabled
  </label>
</div>

So as you can see "Enabled" button is enabled upon page is loaded. If I don't click on "Enabled" button and I submit form variable feature_enabled is not present but if I do, it is. I'm using jQuery's serialize() function to collect form data. However when I click on a radio input I can see (in Developer toolbar) that no "checked" or "selected" attributes added to that HTML node. Furthermore if I enter $('input[type=radio]:checked').val() I got undefined but after I click on that button I got the value.

Why does this happens?

UPDATE
I updated names of radio buttons because as you said they should have the same name. In my workspace they have. This 'bug' got in when I altered the html markup to create this question.

UPDATE 2
Ok, I get it that I that I can add "checked" attribute to my radio button and also get it that only "active" class makes the input look like it is pressed. But! Check bootstrap site about inputs here or here! Open the developer toolbar with F12 and see that when you click either of radio inputs no "checked" attribute is added to HTML source.
And my site saves value of featue_enabled when I click on it before saving and input node does not get "checked" attribute. The only change I can observe is 'active' class goes to the clicked node and leaves the other. (And again, posting this form is working without "checked" attribute!)
I think it is an interesting case and would be good to know why does this happening!

Upvotes: 0

Views: 1663

Answers (5)

Srinivas
Srinivas

Reputation: 737

Add this if you want it via javascript

$('#enabledRadioButtonId').prop('checked','true');

and enabledRadioButtonId as id of the radio button to be enabled.

or just add "checked" to your radio button for which you want it to be checked

<input type="radio" class="form-control" name="feature_enabled" value="1" checked>

Upvotes: 1

vogomatix
vogomatix

Reputation: 5083

Just because you have a class active on the label does not mean you have enabled it. The input needs to be selected (checked in the case of radio buttons as it's a sort of checkbox)

<div class="btn-group custom-btn-group" data-toggle="buttons">
  <label class="btn btn-default active">
    <input type="radio" class="form-control" name="feature" value="1" checked="checked"> Enabled
  </label>
  <label class="btn btn-default">
    <input type="radio" class="form-control" name="feature" value="0"> Disabled
  </label>
</div>

Just to explicitly echo what has been stated in other answers and comments, you can set the checked value in jQuery by:

$('input[type=radio]').prop('checked','true');

Note the difference between Properties (.prop) and Attributes (.attr), as explained in the jQuery documentation

Update: As TrueBlueAussie spotted, your radio buttons return a single value and should all have the same name. The button ids may be different however, which is useful for stating exactly which radio button you wish to be checked in the above jQuery statement

Upvotes: 1

Amit
Amit

Reputation: 1919

try this Demo

add checked in active radio input

<div class="btn-group custom-btn-group" data-toggle="buttons">
  <label class="btn btn-default active">
    <input type="radio" class="form-control" name="feature_enabled" value="1" **checked**> Enabled
  </label>
  <label class="btn btn-default">
    <input type="radio" class="form-control" name="feature_disabled" value="0"> Disabled
  </label>
</div>

Upvotes: 0

Mohamed Amged
Mohamed Amged

Reputation: 489

because actually it's not checked it's just looks like to be checked by css using class active. you should add attribute checked.
also the name of radio buttons should be the same value like name="feature_check"
try this 

<div class="btn-group custom-btn-group" data-toggle="buttons">
  <label class="btn btn-default active">
    <input type="radio" class="form-control" name="feature_check" value="1" checked> Enabled
  </label>
  <label class="btn btn-default">
    <input type="radio" class="form-control" name="feature_check" value="0"> Disabled
  </label>
</div>

Upvotes: 0

SJMan
SJMan

Reputation: 1607

try this 

$('input[type=radio]').attr('checked','true');

Upvotes: 1

Related Questions