CODEWITHSUNDEEP
htmlangularjstwitter-bootstrapinputcheckbox
p0tta
p0tta

Reputation: 1651

AngularJS Bootstrap checkbox not checking on click

I have a checkbox I am using in my AngularJS/Bootstrap application and the issue i'm facing is that when I click on it when it's unchecked, it's not showing the checkmark. The toggleVal() method is being called though and it's executing the steps but it's not showing the check mark. Also, my scope variable myvar is either a 0 or a 1 and I want to display it accordingly.

<a href class="list-group-item list-group-item-action flex-column align-items-start">
 <div class="d-flex w-100 justify-content-between mt-2">
  <input ng-click="toggleVal()" class="form-check-input ml-2" type="checkbox"  
  ng-model="myvar"
  ng-checked="myvar"
  ng-true-value="1" ng-false-value="0">
 </div>
</a>

-- Update: So I have added some additional details including updated code. The checkbox is inside a Bootstrap list group item which may be affecting the selection.

Upvotes: 0

Views: 113

Answers (1)

Alireza Ahmadi
Alireza Ahmadi

Reputation: 9923

The problem is anchor tag. When you click on checkbox actually you click on anchor tag too. So this means your checkbox clicked twice in each click.

To fix the problem simply add href="Javascript:void(0);" to your anchor tag.

    <a href="Javascript:void(0);" class="list-group-item list-group-item-action flex-column align-items-start">
      <div class="d-flex w-100 justify-content-between mt-2">
        <input  class="form-check-input ml-2" type="checkbox"
                ng-model="myvar"
                ng-checked="myvar == 1"
                ng-true-value="1" ng-false-value="0">
      </div>
    </a>

Here is working sample.

Upvotes: 1

Related Questions