I have 3 radio buttons

<div id="test">
<input type="radio" id="time1" name="radio" value="1" /><label for="time1">Test 1</label>
<input type="radio" id="time2" name="radio" value="2" /><label for="time2">Test 2</label>
<input type="radio" id="time3" name="radio" value="3" /><label for="time3">Test 3</label>
</div>

in jquery

$("#test").buttonset();

After that, I want to disable them with (of course, the disabling are placed in an if statement)

$("#test input").attr("disabled", true);  //or
$("#test input").prop("disabled", true);

but it not works, the buttons are still enabled.

I have 3 radio buttons

<div id="test">
<input type="radio" id="time1" name="radio" value="1" /><label for="time1">Test 1</label>
<input type="radio" id="time2" name="radio" value="2" /><label for="time2">Test 2</label>
<input type="radio" id="time3" name="radio" value="3" /><label for="time3">Test 3</label>
</div>

in jquery

$("#test").buttonset();

After that, I want to disable them with (of course, the disabling are placed in an if statement)

$("#test input").attr("disabled", true);  //or
$("#test input").prop("disabled", true);

but it not works, the buttons are still enabled.

• javascript
• jquery
• jquery-ui

• 1 Your <input> tags are missing last letter. – WojtekT Commented May 9, 2012 at 9:55
• @MichaelSwan check my DEMO link, it seems work – thecodeparadox Commented May 9, 2012 at 10:15
• it is occured because $.buttonset(). after disable radio call it again – Morteza Commented May 9, 2012 at 10:18

5 Answers 5

You're using jQuery-UI, after you change the radio buttons to buttonset, they are no longer effect the UserInterface, as it's wrapped with:

<div id="test" class="ui-buttonset">
<input type="radio" id="time1" name="radio" value="1" class="ui-helper-hidden-accessible"><label for="time1" aria-pressed="false" class="ui-button ui-widget ui-state-default ui-button-text-only ui-corner-left" role="button" aria-disabled="false"><span class="ui-button-text">Test 1</span></label>
<input type="radio" id="time2" name="radio" value="2" class="ui-helper-hidden-accessible"><label for="time2" aria-pressed="false" class="ui-button ui-widget ui-state-default ui-button-text-only" role="button" aria-disabled="false"><span class="ui-button-text">Test 2</span></label>
<input type="radio" id="time3" name="radio" value="3" class="ui-helper-hidden-accessible"><label for="time3" aria-pressed="true" class="ui-button ui-widget ui-state-default ui-button-text-only ui-corner-right ui-state-active" role="button" aria-disabled="false"><span class="ui-button-text">Test 3</span></label>
</div>

So you need jQuery UI function to disable the "buttons" (which are spans!)

$("#test input").button("disable")

Live DEMO

jQuery-UI source

$("#test > input:radio").button({disabled:true});

DEMO

after disable call $("#test").buttonset() again.

$("#test").buttonset();

then:

$("#test input").attr("disabled", true);  //or
$("#test input").prop("disabled", true);
$("#test").buttonset();

i test it and work for me

The correct way of doing this, according to the jQuery docs is:

$( '#test' ).buttonset( 'option', 'disabled', true ).buttonset( 'refresh' );

I could not get any of the other suggestion to work. This one does, for me.

The method which I use is (the Radio Group ID is the buttonset ID) :

$('#RadioGroupID').buttonset('disable').buttonset('refresh');

Now, supposing you wanted to set one of the radio buttons to being selected, trigger a click event you may have programmed to the relevant radio button and then disable, you can chain all of this as follows:

$('#RadioButtonID').prop('checked',true).trigger('click').parent().buttonset('disable').buttonset('refresh');