Query About Enabling / Disabling Form Inputs
https://forum.jquery.com/topic/query-about-enabling-disabling-form-inputs
HTML
<div id="book_form_section_1" class="active">
<fieldset>
<legend>About You</legend>
<div>
<label for="title">Title</label>
<select name="title" id="title" class="input">
<option value="Mr">Mr</option>
<option value="Miss">Miss</option>
<option value="Ms">Ms</option>
<option value="Mrs">Mrs</option>
</select>
</div>
<div>
<label for="first_name">First Name</label>
<input type="text" name="first_name" class="input required" required />
</div>
<div>
<label for="last_name">Last Name</label>
<input type="text" name="last_name" class="input"/>
</div>
<div>
<label for="contact_number">Contact Number</label>
<input type="text" name="contact_number" required class="input required" required/>
</div>
<div>
<label for="email">E-mail</label>
<input type="text" name="email" class="input"/>
</div>
<div>
<label for="confirm_email">Confirm E-mail</label>
<input type="text" name="confirm_email" class="input"/>
</div>
</fieldset>
</div>
CSS
body{font-size:0.9em;}
div{margin:3px;}
.required{border:1px solid #ff0000;}
#book_form_section_1{padding-bottom:10px; margin-bottom:10px;border-bottom:1px solid #444;}
.inactive{
/* IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
/* IE 5-7 */
filter: alpha(opacity=20);
/* Netscape */
-moz-opacity: 0.2;
/* Safari 1.x */
-khtml-opacity: 0.2;
/* Good browsers */
opacity: 0.2;
}
JavaScript
function checkRequiredFields() {
$('#book_form_section_1').addClass('inactive');
$('input,select', '#book_form_section_1').attr('disabled', 'disabled');
}
checkRequiredFields();