Disable radio buttons after installation as a set of buttons ()

Question

I have 3 switches

<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 (of course, the disconnection is placed in the if )

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

but it does not work, the buttons are still on.

Answer 1

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

Demo

Answer 2

You are using jQuery-UI, after changing the switches to buttonset they no longer affect UserInterface, since they are wrapped:

 <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 a jQuery user interface function to disable the “buttons” (which are spans !)

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

Live demo

JQuery-UI Source

Answer 3

after disconnecting the call to $ ("# 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

Answer 4

The right way to do this, according to jQuery docs :

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

I could not get any other suggestion to work. It does for me.