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.

But it still doesn’t work in IE 10!!!

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>

This Post Has One Comment

  1. Harry

    I’m pretty sure you misspelled the word “explaination” on your site. You might want to check out a site like SpellRadar.com or SiteCheck.com which have helped me with problems like this in the past.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.