Unable to check/uncheck checkbox when inside Bootstrap dropdown

Question

I'm using bootstrap dropdown along with ng-repeat to produce a list but I'm unable to check or uncheck the checkbox inside the div with data-toggle='dropdown'.

Checkbox works, when I remove data-toggle='dropdown'.

 <div class="dropdown" ng-repeat="item in someArray">
     <div class="dropdown-toggle main-title" data-toggle="dropdown">
     <input type="checkbox"/>
     {{item}}
    <span class="caret"></span>
 </div>

Please post a working code example...

Kyle
– Kyle

2017-08-08 15:08:03 +00:00
Commented Aug 8, 2017 at 15:08 — Kyle
– Kyle, Commented Aug 8, 2017 at 15:08
Are you using UI Bootstrap ?

JeanJacques
– JeanJacques

2017-08-08 15:10:15 +00:00
Commented Aug 8, 2017 at 15:10 — JeanJacques
– JeanJacques, Commented Aug 8, 2017 at 15:10
It seems to works fine, look at this plunker

JeanJacques
– JeanJacques

2017-08-08 15:16:47 +00:00
Commented Aug 8, 2017 at 15:16 — JeanJacques
– JeanJacques, Commented Aug 8, 2017 at 15:16

Eliut Islas · Accepted Answer · 2017-08-08 18:31:39Z

1

The data-toggle is capturing the click and stopping propagation to the checkbox.

Move the input before to the div with data-toggle and it will work fine.

<div class="dropdown" ng-repeat="item in someArray">
    <input type="checkbox"/>
    <div class="dropdown-toggle main-title" data-toggle="dropdown">
        item: {{item}}
        <span class="caret"></span>
    </div>
</div>

answered Aug 8, 2017 at 18:31

Eliut Islas

6285 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Unable to check/uncheck checkbox when inside Bootstrap dropdown

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related