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

$('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/