I would like to detect when a button is pressed in a div that has several buttons that act as checkboxes for a mobile optimized application. This is what I have as html:
When these were just regular flags instead of buttons, like flags, I was able to achieve what I want with this script:
$(document).on('change', 'input:checkbox.modifier', function () {
var totalChecked = $("#modifiersDiv :checkbox:checked").size();
var maximum = parseInt($('#Maximum').val());
if (totalChecked === maximum) {
$("#modifiersDiv :checkbox:not(:checked)").attr("disabled", true);
} else {
$("#modifiersDiv :checkbox:not(:checked)").attr("disabled", false);
}
});
Now I'm trying something like this just to see if the function will run at all, but without success:
$(document).on('click', 'input:button.modifier', function () {
});
The bottom line is what I want to detect with jquery when 5 buttons are selected, then I will need to disable the other buttons in the div until the user deselects a button.
Any advice would be highly appreciated. Thanks in advance, Laziale
UPDATE: the code I use for the button:
var startDiv = "<div class='btn-group btn-block' data-toggle='buttons'>";
var checkBox = '';
$.each(data.modifierOptions, function(key, item) {
checkBox += "<label class='btn btn-checkbox btn-block' style='margin-bottom:2px;'><input type='checkbox' data-quantity='1' class='modifier' data-itemid='" + itemid + "' data-name='" + item.Name + "' data-price='" + item.Price + "' name='" + item.Name + "' value='" + item.ID + "'/>" + item.Name + " </label><br />";
});
var endDiv = "</div>";
var totalDiv = startDiv + checkBox + endDiv;
$(totalDiv).appendTo('#modifiersDiv');