Limit number selected checkboxes

Limit number selected checkboxes

by Adi Jaya

HTML

<h2>Demo 1 [Allowed = 2]</h2>
<ul class="demo" data-allow="2">
    <li>
        <label><input class='check' name='check[]' type="checkbox"/></label>
        <div class="box">your content</div>
    </li>
    <li>
        <label><input class='check' name='check[]' type="checkbox"/></label>
        <div class="box"></div>
    </li>
     <li>
        <label><input class='check' name='check[]' type="checkbox"/></label>
        <div class="box"></div>
    </li>
</ul>


<h2>Demo 2 [Allowed = 5]</h2>
<ul class="demo" data-allow="5">
    <li>
        <label><input class='check' name='check[]' type="checkbox"/></label>
        <div class="box"></div>
    </li>
    <li>
        <label><input class='check' name='check[]' type="checkbox"/></label>
        <div class="box"></div>
    </li>
     <li>
        <label><input class='check' name='check[]' type="checkbox"/></label>
        <div class="box">your content</div>
    </li>
    <li>
        <label><input class='check' name='check[]' type="checkbox"/></label>
        <div class="box"></div>
    </li>
    <li>
        <label><input class='check' name='check[]' type="checkbox"/></label>
        <div class="box"></div>
    </li>
    <li>
        <label><input class='check' name='check[]' type="checkbox"/></label>
        <div class="box"></div>
    </li>
    <li>
        <label><input class='check' name='check[]' type="checkbox"/></label>
        <div class="box">your content</div>
    </li>
    <li>
        <label><input class='check' name='check[]' type="checkbox"/></label>
        <div class="box"></div>
    </li>
    <li>
        <label><input class='check' name='check[]' type="checkbox"/></label>
        <div class="box"></div>
    </li>
    <li>
        <label><input class='check' name='check[]' type="checkbox"/></label>
        <div class="box"></div>
    </li>
    <li>
        <label><input class='check' name='check[]' type="checkbox"/></label>
        <div class="box"></div>
    </li>
    <li>
        <label><input...

CSS

html {
    font-size: 16px;
    font-family: sans-serif;
}

.demo {
    list-style: none;
    padding: 0;
    overflow: hidden;
}

.demo li {
    display: block;
    position: relative;
}

.check {
    display: none;
}

.demo label {
    position: absolute;
    z-index: 2;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.box {
    position: relative;
    z-index: 1;
    padding: 10px;
    margin: 10px;
    min-height: 150px;
    background: #e2e2e2;
    border: 1px solid transparent;
}

label:hover + .box {
    border: 1px solid #6d6d6d;
}

.box.selected, label:hover + .box.selected {
   border-color: #2196F3;
}

@media screen and (min-width:600px){
    .demo li {
       float: left;
       width: 33.3333333%;
       box-sizing: border-box;
    }
}

JavaScript

$( document ).on( "change", ".check", function(){

	var parent = $( this ).parents( "li" );
    var parents = $( this ).parents( "ul" );
	var allowed = parents.attr( "data-allow" ) ;
	var length = parents.find( ".check:checked" ).length;
    
    if ( length > allowed ) {
        $(this).prop( "checked", false );
        alert('You can select maximum ' + allowed );
    }
    
    if( $( this ).is(':checked') ){
    	parent.find( ".box" ).addClass( "selected" );
    } else {
    	parent.find( ".box" ).removeClass( "selected" );
    }
        
        
});