2016-05-04 7 views
-1

У меня есть два radio button, когда один переключатель нажал на его div, чтобы он был enabled, а когда щелкнули другие, это связано с enabled.Как отключить/включить div на переключателе переключателя в jQuery

<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> 
+0

Что вы имеете в виде с помощью включения/выключения DIV? – Adil

+0

можете ли вы опубликовать HTML-код? – RRR

+0

@Razim Khan, Вы имеете в виду Hide/Show div ?? – praguan

ответ

0

Попробуйте это:

<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> 
0

Здесь мы идем:

JQuery:

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

CSS:

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

Вот jsfiddle: enter link description here

Надеется, что это помогает;)

+0

, если я хочу включить, отключить, а не показывать скрытие? то как я это сделаю? –

+0

@RazimKhan Я отредактировал свое решение, попробуйте – praguan

1
<!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'); 
} 
}); 
}); 
Смежные вопросы