<fieldset disabled="disabled">
Add support for disabling fieldsets in all browsers
HTML
<form action="" method="get">
<input type="text" name="field0" value="field" />
<fieldset>
<input type="text" name="field1" value="field in fieldset" />
</fieldset>
<fieldset disabled="false">
<input type="text" name="field2" value="field in disabled fieldset" />
</fieldset>
<fieldset disabled="disabled">
<fieldset>
<input type="text" name="field3" value="field in fielset in disabled fieldset" />
</fieldset>
</fieldset>
<fieldset>
<fieldset disabled="disabled">
<input type="text" name="field4" value="field in disabled fielset in fieldset" />
</fieldset>
</fieldset>
<input disabled="disabled" type="text" name="field5" value="disabled field" />
Fields disabled with javascript
<input type="text" name="fieldj0" value="field" />
<fieldset>
<input type="text" name="fieldj1" value="field in fieldset" />
</fieldset>
<fieldset data-js-disable="true">
<input type="text" name="fieldj2" value="field in disabled fieldset" />
</fieldset>
<fieldset data-js-disable="true">
<fieldset>
<input type="text" name="fieldj3" value="field in fielset in disabled fieldset" />
</fieldset>
</fieldset>
<fieldset>
<fieldset data-js-disable="true">
<input type="text" name="fieldj4" value="field in disabled fielset in fieldset" />
</fieldset>
</fieldset>
<input data-js-disable="true" type="text" name="fieldj5" value="disabled field" />
<fieldset data-js-enable="true">
<fieldset data-js-disable="true">
<input type="text" name="fieldf0" value="field in disabled fielset in fieldset" />
</fieldset>
</fieldset>
<fieldset data-js-disable="true">
<fieldset data-js-enable="true">
<input type="text" name="fieldf1" value="field in fielset in disabled...
CSS
input,button,textarea {
height: 3em;
width: 90%;
display: block;
margin-bottom: 15px;
}
JavaScript
// Fix Object.getPrototypeOf in IE8
if ( typeof Object.getPrototypeOf !== "function" ) {
if ( typeof "test".__proto__ === "object" ) {
Object.getPrototypeOf = function(object){
return object.__proto__;
};
} else {
Object.getPrototypeOf = function(object){
// May break if the constructor has been tampered with
return object.constructor.prototype;
};
}
}
//= require jquery
// Fixes (mostly) fieldset.disabled in webkit browsers, assuming they support ES5.
$(function() {
var fieldSet = document.createElement('fieldset'),
proto = Object.getPrototypeOf(fieldSet);
if (fieldSet.disabled === undefined) {
function get_disabled() {
// FF4 treats the empty string as true when setting naked attributes.
var val = this.getAttribute('disabled');
return val === '' ? true : !! val;
}
function set_disabled(value) {
// For jQueryMobile
if ( !! $.mobile && $.mobile.gradeA()) {
if ( !! value) {
$(this).addClass('ui-disabled');
} else {
$(this).removeClass('ui-disabled');
}
}
$( !! value ? ':enabled' : ':disabled', this).not('fieldset').filter(function() {
return ( !! value) || ($(this).closest('fieldset:disabled').length == 0)
}).each(function() {
this.disabled = !! value;
});
}
// Webkit
if (Object.defineProperty) {
Object.defineProperty(proto, 'disabled', {
get: get_disabled,
set: set_disabled
});
// FF3
} else {
proto.__defineGetter__('disabled', get_disabled);
proto.__defineSetter__('disabled', set_disabled);
}
// Do an initial disabling of any disabled fieldsets
$(function() {
$('fieldset').filter(function() {
...