check box style

check box styling with selects

HTML

<div id="errorList"></div>

CSS

html {
    font-family:helvetica;
}

label {
    padding:10px;
    background:#5cd65c;
    display:block;
    border:solid 1px #FFF;
    cursor: pointer;
    color:#FFF;
    transition: background-color 0.4s ease, color 0.4s ease;
}

input[type="checkbox"] {
    display:none;
}

input[type="checkbox"]:checked + label {
    color:white;background:#ff6666;border:solid 1px;
}

JavaScript

var errorsAll = ["Error 01","Error 02","Error 03","Error 04","Error 05"];
var errorsDisabled = ["Error 01", "Error 04"];
var errorHTML = "";

for (i = 0; i < errorsAll.length; i++) {
    var checked = (errorsDisabled.indexOf(errorsAll[i], 0) !== -1) ? "checked" : "";
    errorHTML += "<input type='checkbox' id='e"+ i +"' name='"+ errorsAll[i] +"' value='"+ errorsAll[i] +"' "+checked+" />";	
    errorHTML += "<label for='e"+ i +"'><span></span>"+ errorsAll[i] +"</label>";
  	errorHTML += "<input type='hidden' id='e"+ i +"val' value='"+ errorsAll[i] +"' />";
}
  
jQuery("#errorList").html(errorHTML);

jQuery('#errorList input[type=checkbox]').on('click', function(){
    errorsDisabled = [];
    
     $('#errorList input[type=checkbox]:checked').each(function() {
       errorsDisabled.push($(this).val());
     });
    
    console.log(errorsDisabled);
});


console.log(errorsDisabled);