How to Increase Limit Of Checkbox by Click Event on Disabled Checkboxes
Can you please take a look at this demo and let me know how I can change the limit of checkboxes to 3 and then to no limit every time that user clicks on any of ONLY disabled checkboxes?
How can I trigger an event on disabled checkboxes?
This doesn't work:
$('input:checkbox:disabled').click(function(){ alert("hi"); });I also tried
$("input:checkbox").not(":checked").attr("readonly", true); $("input:checkbox").not(":checked").prop("readonly", true);but now all checkboxes are available to be checked!
The proccess in first step is if the user checks 2 item the other checkboxes will diabled now if user clicks on any of disabled checkboxes the #opt-limit-3 will shows up and prompt user the ptions of increasing the limit or leaving the current situation?! If Yes then I need to increase the limit = 3
var limit = 2; $("input:checkbox").click(function() { var bol = $("input:checkbox:checked").length >= limit; $("input:checkbox").not(":checked").attr("disabled",bol); }); <div class="container"> <div class="well"> <input type="checkbox" > <input type="checkbox" > <input type="checkbox" > <input type="checkbox" > <input type="checkbox" > <input type="checkbox" > <input type="checkbox" > <input type="checkbox" > <input type="checkbox" > <input type="checkbox" > <input type="checkbox" > <input type="checkbox" > <input type="checkbox" > <input type="checkbox" > <input type="checkbox" > </div> <div class="well hidden" id="opt-limit-3"> You have reached the Max Items. Would You Like to Icrease to 3 Items <button class="btn btn-default" id="limitTo3" type="submit">Yes</button> <button class="btn btn-default" type="submit">No</button> </div> <div class="well hidden" id="opt-no-limit"> You have reached the Max Items. Would You Like to Icrease to no limit Items <button class="btn btn-default" id="toNoLimit" type="submit">Yes</button> <button class="btn btn-default" type="submit">No</button> </div> </div>