Twitter Bootstrap Question posted in

How to check only one checkbox in angular? – Twitter bootstrap

Could you please tell me how to check only one checkbox at one time? I show a popup screen in which I display checked box. But user can select multiple checkboxes. I need to prevent that.I mean user can only select one checkbox at one time. Here is my code
http://plnkr.co/edit/p2xHhT7e72m3nnMjP7qC?p=preview

<!doctype html>
<html ng-app="plunker">
  <head>
    <script src="https://code.angularjs.org/1.4.1/angular.js"></script>
    <script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.6.0.js"></script>
    <script src="example.js"></script>
    <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
  </head>
  <body>

<li class="dropdown" ng-controller="DropdownCtrl">
  <a class="dropdown-toggle">
    Click me for a dropdown, yo!
  </a>
  <ul class="dropdown-menu">
    <li class="checkbox"><input type="checkbox" class="selectCheckBox" ng-click="$event.stopPropagation()"/>Option 1</li>
    <li><input type="checkbox" checked="checked" ng-click="$event.stopPropagation()"/>Option 2</li>
        <li><input type="checkbox"  ng-click="$event.stopPropagation()"/>Option 3</li>

    </ul>
</li>
  </body>
</html>

want to use checkbox not radio button

Tags:

2

Answers


  1. 0

    As mentioned in the comments you could use a radio button. (Please provide example here)

    Another way is to wrap your inputs in a form field and use a custom directive to validate it. (Provide example here)

    Please also check this plunkr out (provide explanation what the plunkr does here)
    http://plnkr.co/edit/p3qv4vKR5r7QsF6EQe5D?p=preview

    Login or Signup to reply.
  2. 0

    Out of pressure from the asking user I removed the radio button part. The reasons to use checkbox for single select stay mysterious.

    Alternative:

    If you really want to use checkboxes for some reason use a function on ng-click. 

    <input ng-click="unsetOtherOptions(value1)" 

$scope.unsetOtherOptions = function(value) {
    // unset all values
    for (var v in allValues) {
        v = false;
    }
    // reset value
    value = true;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search