IE 10 still doesn’t support “onchange” event in HTML5!

HTML5 has a lot of nice feature, but the cross browser support is still not so ideally.

Just like:

If you want to disable the fields in a “fieldset” and dynamically enable them when some condition is met, the best way is to use a radio button or a checkbox.

You can add a “disabled” attribute on the nested fieldset elements, and use “onchange” event on the radio button or checkbox to controll the “disabled” attribute.

The following code works under chrome and firefox perfectly but not IE:

<form>
    <fieldset>
        <legend>Store Credit Card</legend>
        <p><label>Name displayed on your card:<input name="fullName"
            required></label></p>
        <fieldset name="accountNum" disabled>
            <legend>
                <label>
                    <input type="radio" name="accountType"
                           onchange="form.accountNum.disabled = !checked;
                           form.accountLetters.disabled=checked">My account is a
                           12-digit number
                </label>
            </legend>
            <p><label>Store card number: <input name="cardNum"
                required></label></p>
        </fieldset>
        <fieldset name="accountLetters" disabled>
            <legend>
                <label>
                    <input type="radio" name="accountType"
                           onchange="form.accountLetters.disabled = !checked;
                           form.accountNum.disabled=checked">My account includes
                           letters and numbers
                </label>
            </legend>
            <p><label>Store card code: <input name="cardLetters"></label></p>
        </fieldset>
    </fieldset>
</form>