ie8-fieldset-disabled-fix

fieldset disabled attribute IE8+ workaround

by ylepikhov

HTML

<form>
    <fieldset>
        <input type=text>
        <input type=file>
    </fieldset>
    <button type=button>toggle fieldset disabled</button>
</form>

CSS

fieldset {
    /* to set absolute position for :after content */
    position: relative;
}
/* this will 'screen' all fieldset content from clicks */
fieldset[disabled]:after {
    
    content: ' ';
    position: absolute;
    z-index: 1;
    top: 0; right: 0; bottom: 0; left: 0;
    /* i don't know... it was necessary to set background */
    background: url( data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==);
}

JavaScript

document.querySelector("button").onclick = function() {
    var fs = document.querySelector("fieldset");
    fs.disabled = !fs.disabled;
};