How to disable/enable a div on radio button click in jquery

Question

I have two radio button , when one radio button is clicked its div to be enabled and when other is clicked its related is enabled .

<table>
  <tr>
     <td>
        BOD: @Html.RadioButton("HeadBOD", "Head")
     </td>
     <td>
        Head:@Html.RadioButton("HeadBOD", "BOD")
     </td>
     <td></td>
     <td></td>
  </tr>
</table>

1) <div id="HeadDive"></div>
2) <div id="BODDive"></div>

Answer 1

Try this:

<script type="text/javascript"> 
$( document ).ready(function() {
  $("input:radio").click(function() {
    if($(this).val() == "head") {
      $("#head").show();
      $("#bod").hide();
    } else {
      $("#head").hide();
      $("#bod").show();
    }
  });
});
</script>

<input type="radio" name="opt" value="head"> HEAD
<input type="radio" name="opt" value="bod"> BOD

<div id="head" style="display:none;">Head</div>
<div id="bod" style="display:none;">BOD</div>

Answer 2

<!DOCTYPE html>
<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="http://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>

$(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');
}
});
});

Answer 3

Here we go:

jQuery:

    <script>
        $('#disable').on('click', function() {
            $('.demo').disable();
        });
        $('#enable').on('click', function() {
            $('.demo').enable();
        });
    </script>

CSS:

        <style>
         div.disabled {
        background: lightgrey;
    }
        </style>

Here is jsfiddle: enter link description here

Hope it helps;)

Answer 4

this one should solve the problem :

<script type="text/javascript">
$( document ).ready(function() {
$('input[type=radio]').click(function(){


    if (this.previous) {
        this.checked = false;
        document.getElementById("nc").style.display = "block";
        this.previous=false;
    }
   else {
        this.previous = this.checked;
        document.getElementById("nc").style.display = "none";
    }

});});

How to disable/enable a div on radio button click in jquery

Question

4 answers

solution1
1 ACCPTED 2016-05-04 06:11:44

solution2
1 2016-05-04 06:30:41

solution3
0 2016-05-04 06:17:20

solution4
0 2021-07-06 08:51:02

How to disable/enable a div on radio button click in jquery

Question

4 answers

solution1 1 ACCPTED 2016-05-04 06:11:44

solution2 1 2016-05-04 06:30:41

solution3 0 2016-05-04 06:17:20

solution4 0 2021-07-06 08:51:02

solution1
1 ACCPTED 2016-05-04 06:11:44

solution2
1 2016-05-04 06:30:41

solution3
0 2016-05-04 06:17:20

solution4
0 2021-07-06 08:51:02