javascript - Bootstrap drop down with check box(s) allowing for multiple check boxes instead of just one -


i have bootstrap drop down menu allows user add check box next item in drop down list. however, user able add multiple check boxes - desired behavior user should able select 1 check box. if user has selected 1 check box other check box should removed.

$("document").ready(function() {      $('.dropdown-menu').on('click', function(e) {      if($('.checkbox').count() > 1){             if($(this).hasclass('dropdown-menu-form')) {            e.stoppropagation();        }      }      });  });
.dropdown-menu-form {    padding: 5px 10px 0;    max-height: 100px;    overflow-y: scroll;  }
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">    <div class="dropdown">    <a class="dropdown-toggle btn" data-toggle="dropdown" href="#">         toggle dropdown        <b class="caret"></b>     </a>    <ul class="dropdown-menu dropdown-menu-form" role="menu">      <li>        <label class="checkbox">          <input type="checkbox">checkbox 1        </label>      </li>      <li>        <label class="checkbox">          <input type="checkbox">checkbox 2        </label>      </li>      <li>        <label class="checkbox">          <input type="checkbox">checkbox 2        </label>      </li>      <li>        <label class="checkbox">          <input type="checkbox">checkbox 2        </label>      </li>      <li>        <label class="checkbox">          <input type="checkbox">checkbox 2        </label>      </li>      <li>        <label class="checkbox">          <input type="checkbox">checkbox 3        </label>      </li>    </ul>  </div>    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

i tried implement count of number of klass of .checkbox did not work. looking have behavior if user clicks check box previous check box removed.

checkboxes created allow multiple checks, think of you can have this, that, , that. looking radio button. radio buttons treated you this or you that.

try this

<li>         <label class="radio-btn">             <input type="radio">             radio 1         </label>     </li> 

js

$("document").ready(function() {    $('.dropdown-menu').on('click', function(e) {     if($('.radio-btn').count() > 1){            if($(this).hasclass('dropdown-menu-form')) {           e.stoppropagation();       }     }    }); }); 

Comments

Popular posts from this blog

java - nested exception is org.hibernate.exception.SQLGrammarException: could not extract ResultSet Hibernate+SpringMVC -

sql - Postgresql tables exists, but getting "relation does not exist" when querying -

asp.net mvc - breakpoint on javascript in CSHTML? -