CODEWITHSUNDEEP
javascriptjqueryjquery-ui
Snake Eyes
Snake Eyes

Reputation: 16764

Disable radio buttons after set as buttonset()

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.

Upvotes: 6

Views: 6850

Answers (5)

Keith
Keith

Reputation: 801

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');

Upvotes: 0

stldoug
stldoug

Reputation: 850

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.

Upvotes: 0

gdoron
gdoron

Reputation: 150313

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

Upvotes: 11

Morteza
Morteza

Reputation: 2428

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

Upvotes: 1

thecodeparadox
thecodeparadox

Reputation: 87083

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

DEMO

Upvotes: 7

Related Questions