How to limit the number of selected checkboxes

Question

I have the following HTML    lt div class  pricing-levels-3  gt     lt p gt  lt strong gt Which level would you like   Select 3 Levels  lt  strong gt  lt  p gt     lt input class  single-checkbox type  checkbox  name  vehicle  value  Bike  gt Level 1 lt br gt     lt input class  single-checkbox  type  checkbox  name  vehicle  value  Bike  gt Level 2 lt br gt     lt input class  single-checkbox  type  checkbox  name  vehicle  value  Bike  gt Level 3 lt br gt     lt input class  single-checkbox  type  checkbox  name  vehicle  value  Bike  gt Level 4 lt br gt     lt input class  single-checkbox  type  checkbox  name  vehicle  value  Bike  gt Level 5 lt br gt     lt input class  single-checkbox  type  checkbox  name  vehicle  value  Bike  gt Level 6 lt br gt     lt input class  single-checkbox  type  checkbox  name  vehicle  value  Bike  gt Level 7 lt br gt   lt  div gt    Live site   http   www chineselearnonline com amember signup20 php  How can I do it so that the user can only select 3 of those checkboxes

User · Answer

Try this DEMO      document  ready function            input name  vehicle     change function            var maxAllowed   3        var cnt      input name  vehicle   checked   length        if  cnt  gt  maxAllowed                      this  prop  checked                 alert  Select maximum     maxAllowed     Levels

User · Answer

If you want to uncheck the checkbox that you have selected first under the condition of 3 checkboxes allowed  With vanilla javascript  you need to assign onclick    checking this   in your html input checkbox  var queue       function checking id      queue push id     if  queue length   3       queue 0  checked   false     queue shift

User · Answer

I think we should use click instead change Working DEMO

User · Answer

I did this today  the difference being I wanted to uncheck the oldest checkbox instead of stopping the user from checking a new one       let maxCheckedArray           let assessmentOptions   jQuery   checkbox-fields   find  input type  checkbox          assessmentOptions on  change   function             let checked   jQuery this  prop  checked            if checked                maxCheckedArray push jQuery this                      if maxCheckedArray length  gt   3                let old item   maxCheckedArray shift                old item prop  checked   false

User · Answer

I have Alter this function to auto uncheck previous   x000D   x000D        var limit   3  x000D            compare items   on  click   function evt    x000D          index     this  parent  td   parent  tr   index    x000D          if      compare items checked   length  gt   limit    x000D                compare items   eq localStorage getItem  last-checked-item    removeAttr  checked    x000D              this checked   false  x000D            x000D          localStorage setItem  last-checked-item   index   x000D            x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt input type  checkbox  class  compare items  gt 1 x000D   lt input type  checkbox  class  compare items  gt 2 x000D   lt input type  checkbox  class  compare items  gt 3 x000D   lt input type  checkbox  class  compare items  gt 4 x000D   lt input type  checkbox  class  compare items  gt 5 x000D   lt input type  checkbox  class  compare items  gt 6 x000D   lt input type  checkbox  class  compare items  gt 7 x000D   lt input type  checkbox  class  compare items  gt 8 x000D   lt input type  checkbox  class  compare items  gt 9 x000D   lt input type  checkbox  class  compare items  gt 10 x000D   x000D   x000D

User · Answer

input checkbox   click function        if     input checkbox checked   length  gt  3         return false

User · Answer

Using change event you can do something like this   var limit   3     input single-checkbox   on  change   function evt       if   this  siblings   checked   length  gt   limit           this checked   false             See this working demo

User · Answer

Try like this    On change event      input type checkbox    on  change   function  e        if     input type checkbox  checked   length  gt  3              this  prop  checked   false           alert  allowed only 3                Check this in JSFiddle

User · Answer

I d say like letiagoalves said  but you might have more than one checkbox question in your form  so I d recommend to do like this     var limit   3         input single-checkbox   on  change   function evt            if    input single-checkbox   siblings  input single-checkbox checked   length  gt  limit                this checked   false

User · Answer

checkbox   click function      if      checkbox checked   length  gt   3            checkbox   not   checked   attr  disabled  true         else          checkbox   not   checked   removeAttr  disabled          i used this

User · Answer

This is how I made it work      Function to check and disable checkbox function limit checked  element  size       var bol      element     checked   length  gt   size      element  not   checked   attr  disabled  bol         List of checkbox groups to check var check elements         id    group1 input type checkbox    size  2        id    group2 input type checkbox    size  3           Run function for each group in list   check elements  each  function index  element         Limit checked on window load     window  load  function         limit checked  element id  element size               Limit checked on click     element id  click function         limit checked  element id  element size

User · Answer

Working DEMO  Try this  var theCheckboxes       pricing-levels-3 input type  checkbox      theCheckboxes click function         if  theCheckboxes filter   checked   length  gt  3            this  removeAttr  checked

[jquery] How to limit the number of selected checkboxes?

Examples related to jquery