1$(document).ready(function() {
2 // By Default Disable radio button
3 $(".second").attr('disabled', true);
4 $(".wrap").css('opacity', '.2'); // This line is used to lightly hide label for disable radio buttons.
5 // Disable radio buttons function on Check Disable radio button.
6 $("form input:radio").change(function() {
7 if ($(this).val() == "Disable") {
8 $(".second").attr('checked', false);
9 $(".second").attr('disabled', true);
10 $(".wrap").css('opacity', '.2');
11 }
12 // Else Enable radio buttons.
13 else {
14 $(".second").attr('disabled', false);
15 $(".wrap").css('opacity', '1');
16 }
17 });
18});
1<html>
2<head>
3<title>Disable Radio Button in Form Using jQuery</title>
4<!-- Include CSS File Here -->
5<link rel="stylesheet" href="css/style.css"/>
6<!-- Include JS File Here -->
7<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
8<script type="text/javascript" src="js/disable_radio.js"></script>
9</head>
10<body>
11 <div class="container">
12 <div class="main">
13 <h2>Disable Radio Button in Form Using jQuery</h2>
14 <form action="#" method="post" id="form">
15 <label>Enable / Disable Radio Buttons: </label>
16 <input type="radio" name="first" value="Enable" id="enable">
17 <span>Enable</span>
18 <input type="radio" name="first" value="Disable" id="disable" checked>
19 <span>Disable</span>
20 <label>Radio Buttons :</label>
21 <input type="radio" name="second" class="second" value="Radio 1">
22 <span class="wrap">Radio 1</span>
23 <input type="radio" name="second" class="second" value="Radio 2">
24 <span class="wrap">Radio 2</span>
25 <input type="radio" name="second" class="second" value="Radio 3">
26 <span class="wrap">Radio 3</span>
27 </form>
28 </div>
29 </div>
30</body>
31</html>
1@import url(https://fonts.googleapis.com/css?family=Droid+Serif);
2h2{
3 text-align: center;
4}
5hr{
6 margin-bottom: 25px;
7}
8div.container{
9 width: 643px;
10 margin:50px auto;
11 font-family: 'Droid Serif', serif;
12 position:relative;
13}
14div.main{
15 width: 320px;
16 padding: 10px 60px 15px;
17 box-shadow: 0 0 10px;
18 border-radius: 2px;
19 font-size: 13px;
20 margin: 0 auto 50px;
21}
22span{
23 margin-right: 17px;
24 font-size: 15px;
25}
26input[type=radio]{
27 margin:10px 10px 0 10px;
28}
29label{
30 color: #464646;
31 font-size: 15px;
32 font-weight: bold;
33}