如果单击单选按钮，则禁用表单中的所有元素

Question

I would like to disable all form elements in a div and show a RED message inside a new div if I click a radio button outside the div.

For example:

<div id="myform">
  <form>
    First name: <input type="text" name="firstname" /><br />
    Last name: <input type="text" name="lastname" />
  </form>
</div>
<div id="message">
  Red Message here
</div>


<form>
  <input type="radio" name="sex" value="male" /> Male<br />
  <input type="radio" name="sex" value="female" /> Female
</form>  

I want when someone clicks one of the two radio buttons to disable all elements in the above form ( myform ) and display a red message in div message .

Thanks

Answer 1

Try this

$("input:radio").click(function(){
   $("#myform input").attr("disabled", true);
   $("#message").show();
});

Answer 2

$('input[name="sex"]').click(function(){
    $('#myform input').prop('disabled',true);
    $('#message').show();
});

#message { display:none; color:red }


$('#reset').click(function(){
    $('#myform input').prop('disabled',false);
    $('#message').hide();
});

http://jsfiddle.net/2zr4J/1/

Answer 3

$('input[name="sex"]').click(function(){
    $('#myform input').prop('disabled',true);
    $('#message').fadeIn();
});
$('#reset').click(function(){
    $('#myform input').removeProp('disabled');
    $('#message').fadeOut();
});

Working demo: http://jsfiddle.net/AlienWebguy/2zr4J/2/