Description: The checklist boxes allow for multiple selection to be chosen. Adding the attribute disabled="disabled" to the input tag will grey out the box it is added to making it unselectable.

508 Guidelines: Each box can be tabbed to individually and can be toggle with the space key. The title attribute on input should be used for the screen reader

Checklist Boxes

<form action="#" method="post" class="form-container">
    <div class="col-md-6">
        <div class="well read-only-well">
            <fieldset>
                <legend>Condition List Items</legend>
                <div class="well-scroll">
                    <div class="control form-group">
                        <div class="checkbox border-bottom">
                            <label for="conditionListItem1">
                                <input type="checkbox" checked value="option1" name="conditionList" title="To select this option press enter on the checkbox" id="conditionListItem1" /> Hypertension (ICD-9-CM 401.9)</label>
                        </div>
                    </div>
                    <div class="control form-group">
                        <div class="checkbox border-bottom">
                            <label for="conditionListItem2">
                                <input type="checkbox" checked value="option2" name="conditionList" title="This option is already selected and cannot be unselected" disabled="disabled" id="conditionListItem2" /> Hyperlipidemia (ICD-9-CM 272.4)</label>
                        </div>
                    </div>
                    <div class="control form-group">
                        <div class="checkbox border-bottom">
                            <label for="conditionListItem3">
                                <input type="checkbox" value="option3" name="conditionList" title="To select this option press enter on the checkbox" id="conditionListItem3" /> Acute Myocardial infarction, unspecified site, episode of care unspecified (ICD-9-CM 410.90)</label>
                        </div>
                    </div>
                    <div class="control form-group">
                        <div class="checkbox border-bottom">
                            <label for="conditionListItem4">
                                <input type="checkbox" value="option4" name="conditionList" title="To select this option press enter on the checkbox" id="conditionListItem4" /> Chronic Systolic Heart failure (ICD-9-CM 428.22)</label>
                        </div>
                    </div>
                    <div class="control form-group">
                        <div class="checkbox border-bottom">
                            <label for="conditionListItem5">
                                <input type="checkbox" value="option5" name="conditionList" title="To select this option press enter on the checkbox" id="conditionListItem5" /> Diabetes Mellitus Type II or unspecified (ICD-9-CM 250.00)</label>
                        </div>
                    </div>
                </div>
            </fieldset>
        </div>
    </div>
</form>

Copy

Checklist Boxes