Question

I swear I have done checkboxes a million times but these are giving me trouble. When I check either one, the other one also gets the checked attribute. My guess? Angular is the culprit, but I still need to find a solution because I can't strip Angular out. I'd give you a JFiddle, but like I said, Angular injections and modules, etc...You understand. But I will give you the related code:

This is the HTML:

<div class="form-group col-xs-12 col-sm-12 col-md-3" ng-class="{ 'has-error': quoteform.inputProject.$invalid && submitted }">
    <label for="inputProject">Project Type <span class="required">*</span></label>
    <br />
    <label class="checkbox-inline">
        <input ng-model="formData.inputProject" type="checkbox" name="inputProject" id="checkbox1" value="checkbox1"> Lawn Care
    </label>
    <br />
    <label class="checkbox-inline">
        <input ng-model="formData.inputProject" type="checkbox" name="inputProject" id="checkbox2" value="checkbox2"> Home Improvement
    </label>
</div>

After checking the broweser's dev tools I noticed this

<input ng-model="formData.inputProject" type="checkbox" name="inputProject" id="project" value="" class="ng-pristine ng-untouched ng-valid" tabindex="0" aria-checked="true" aria-invalid="false">

The aria-checked changes to true on all checkboxes when I click on one. Why? and how do I fix this?

Thanks

Answer 1

Because you have the same model set to each checkbox.

You need to have a different model for each, somewhat like this: take note of the ng-model

<div class="form-group col-xs-12 col-sm-12 col-md-3" ng-class="{ 'has-error': quoteform.inputProject.$invalid && submitted }">
    <label for="inputProject">Project Type <span class="required">*</span></label>
    <br />
    <label class="checkbox-inline">
        <input ng-model="formData.inputProject1" type="checkbox" name="inputProject" id="checkbox1" value="checkbox1"> Lawn Care
    </label>
    <br />
    <label class="checkbox-inline">
        <input ng-model="formData.inputProject2" type="checkbox" name="inputProject" id="checkbox2" value="checkbox2"> Home Improvement
    </label>
</div>

Why are all checkbox being checked at the same time

1 个答案: