disable radio button jquery code example

Example 1: jquery disable radio button command

$(document).ready(function() {
  // By Default Disable radio button
  $(".second").attr('disabled', true);
  $(".wrap").css('opacity', '.2'); // This line is used to lightly hide label for disable radio buttons.
  // Disable radio buttons function on Check Disable radio button.
  $("form input:radio").change(function() {
    if ($(this).val() == "Disable") {
      $(".second").attr('checked', false);
      $(".second").attr('disabled', true);
      $(".wrap").css('opacity', '.2');
    }
    // Else Enable radio buttons.
    else {
      $(".second").attr('disabled', false);
      $(".wrap").css('opacity', '1');
    }
  });
});

Example 2: jquery disable radio button command

<html>
<head>
<title>Disable Radio Button in Form Using jQuery</title>
<!-- Include CSS File Here -->
<link rel="stylesheet" href="css/style.css"/>
<!-- Include JS File Here -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="js/disable_radio.js"></script>
</head>
<body>
  <div class="container">
    <div class="main">
      <h2>Disable Radio Button in Form Using jQuery</h2>
      <form action="#" method="post" id="form">
        <label>Enable / Disable Radio Buttons: </label>
        <input type="radio" name="first" value="Enable" id="enable">
        <span>Enable</span>
        <input type="radio" name="first" value="Disable" id="disable" checked>
        <span>Disable</span>
        <label>Radio Buttons :</label>
        <input type="radio" name="second" class="second" value="Radio 1">
        <span class="wrap">Radio 1</span>
        <input type="radio" name="second" class="second" value="Radio 2">
        <span class="wrap">Radio 2</span>
        <input type="radio" name="second" class="second" value="Radio 3">
        <span class="wrap">Radio 3</span>
      </form>
    </div>
  </div>
</body>
</html>

Example 3: jquery disable radio button command

@import url(https://fonts.googleapis.com/css?family=Droid+Serif);
h2{
  text-align: center;
}
hr{
  margin-bottom: 25px;
}
div.container{
  width: 643px;
  margin:50px auto;
  font-family: 'Droid Serif', serif;
  position:relative;
}
div.main{
  width: 320px;
  padding: 10px 60px 15px;
  box-shadow: 0 0 10px;
  border-radius: 2px;
  font-size: 13px;
  margin: 0 auto 50px;
}
span{
  margin-right: 17px;
  font-size: 15px;
}
input[type=radio]{
  margin:10px 10px 0 10px;
}
label{
  color: #464646;
  font-size: 15px;
  font-weight: bold;
}

Tags:

Javascript Example

Recent Posts