How to disable radio button using Jquery and Javascript snippet. While displaying data to user many times we require an option to enable or disable some information or area based on radio button click.
How to check if value exists in array.
Disable Radio Buttons using their Value Attribute
Let’s first create two radio buttons in our form. Now we want to disable only radio button whose value is A.
Creating these two radio button
1 2 |
<input type="radio" id="radio_button1" name="active" value="A" /> <input type="radio" id="radio_button2" name="active" value="P" /> |
Jquery code to disable the radio button whose Value is A.
1 2 3 4 5 6 |
$(document).ready(function(){ var status = 'A'; $("input[type=radio][value=" + status + "]").attr("disabled",true); }); |
Redirect page through javascript and jquery.
Disable Radio Buttons using ID
1 2 |
<input type="radio" id="radio_button1" name="active" value="A" /> <input type="radio" id="radio_button2" name="active" value="P" /> |
Javascript Code
1 2 3 |
// Disable radio button whose id is radio_button1 document.getElementById("radio_button1").disabled=true; |
Jquery Code
1 |
$('#radio_button1').attr('disabled',true); |
Disable All Radio Buttons
Sometimes we required to disable all radio buttons based on some checkbox or button clicked.
1 2 3 4 5 |
<input type="radio" id="radio_button1" name="active" value="A" class="rad"/> <input type="radio" id="radio_button2" name="active" value="P" class="rad" /> <input type="radio" id="radio_button3" name="active" value="C" class="rad" /> <input type="checkbox" value="Disable radio button"/> |
If all those radio buttons have common class then it’s very easy to disable.
1 2 3 4 5 6 |
/* On checkbox click disable all those radio buttons whose class is rad. */ $(':checkbox').click(function() { $('.rad').attr('disabled',true); }); |
Get the Value of Selected Radio Button
1 2 3 4 5 |
$(':radio').click(function() { var buttonValue = $(this).val(); alert(buttonValue); }); }); |
Conclusion
I have tried my best to include examples which is commonly used. If you want to add anything please mention in your comment so that other readers also take the advantage of your knowledge.