Disable radio buttons based on value

Question

I want to disable radio buttons based on the value of a variable. The radio that is equal to the variable value should be disabled.

Ex:

<input type="radio" name="r1" value="a" />Value a
<input type="radio" name="r1" value="b" />Value b

So if the $variable = 'a'; then the radio button which has the value a should be disabled.

Franko

you can get the value by $('input[type="radio"]').val(); then set attribute disabled to true – Atahualpa

Answer 1

Try -

var a = 'a';
$("input[type=radio][value=" + a + "]").prop("disabled",true);

or

var a = 'a';
$("input[type=radio][value=" + a + "]").attr("disabled",true);

If you're using an older jQuery version.

Working demo - http://jsfiddle.net/FtwcL/1

Sisley

Good one, but you should use prop for setting and getting properties that evaluate to a boolean value. – Vesperal

@Vesperal - Am I right in thinking .prop will only work with post 1.6 versions of jQuery? – Sisley

It works thanks but I want disabled to be added to the code like this <input type="radio" name="r1" value="a" disabled /> – Franko

@ipr101: Yes, but that's what the OP should be using either way. – Vesperal

@Franko - jQuery adds the 'disabled' flag dynamically to the DOM so you won't see it in the code - if you viewed the souce code via something like Firebug you might see the 'disabled' flag added. – Sisley

Answer 2

If you want to disable based by name and value, you can try this

var a = 'a';
var fieldName = 'r1';
$('input[type=radio][name=' + fieldName + '][value='+ a +']').prop('disabled', true);

Overreach