I am trying to create an input field dynamically, using JQuery. It works up to a point but then absolutely stops working, no error in console and I am confused, please help.
I will attach a snippet alongside the code so you can better understand what's happening.
I can't define the problem because I don't fully understand what's happening, but I can try:
When I create a color I also want to create a size under that color, it works for the first color but doesn't work for other colors. What am I doing wrong?
$(document).ready(function() {
$("#add-color").click(function() {
$("#color-input-house")
.html($("#color-input-house")
.html() + '<div class="form-group">' +
'<input type="text" class="form-control colors" placeholder="Color">' +
' <button type="button" class="add-size small btn btn-primary rounded form-control">Add Size</button>' +
' <button type="button" class="remove-size small btn btn-warning rounded form-control">Remove Size</button>' +
' <div class="size-input-house"></div></div>');
});
$("#remove-color").click(function() {
if ($(".colors").length !== 1) {
$(".add-size").last().remove();
$(".remove-size").last().remove();
$(".colors").last().remove();
}
});
$(".add-size").click(function() {
$(this)
.parent()
.find(".size-input-house")
.html($(".size-input-house")
.html() + '<div class="form-group">' +
'<input type="text" class="form-control sizes" placeholder="Size"></div>');
});
$(".remove-size").click(function() {
if ($(".sizes").length !== 1) {
$(".sizes").last().remove();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
<input type="text" class="form-control colors" placeholder="Color">
<button type="button" class="add-size small btn btn-primary rounded form-control">Add Size</button>
<button type="button" class="remove-size small btn btn-warning rounded form-control">Remove Size</button>
<div class="size-input-house"></div>
</div>
<div id="color-input-house"></div>
<div class="form-group">
<div>
<button type="button" id="add-color" class="small btn btn-primary rounded form-control">Add Color</button>
<button type="button" id="remove-color" class="btn btn-warning rounded form-control">Remove Color</button>
</div>
</div>
when you add something with jquery and you want to apply click on them it is better to use following format in jquery:
$(document).on("click",".add-size",function(){
$(this)
.parent()
.find(".size-input-house")
.html($(".size-input-house")
.html()+'<div class="form-group">' +
'<input type="text" class="form-control sizes" placeholder="Size"></div>');
});
and the same way for another:
$(document).on("click",".remove-size",function(){
if($(".sizes").length !== 1){
$(".sizes").last().remove();
}
});
Here is the solution and a working code:
$(document).on("click","#add-color",function(){
$("#color-input-house")
.html($("#color-input-house")
.html()+'<div class="form-group">' +
'<input type="text" class="form-control colors" placeholder="Color">' +
' <button type="button" class="add-size small btn btn-primary rounded form-control">Add Size</button>' +
' <button type="button" class="remove-size small btn btn-warning rounded form-control">Remove Size</button>' +
' <div class="size-input-house"></div></div>');
});
$(document).on("click","#remove-color",function(){
if($(".colors").length !== 1){
$(".add-size").last().remove();
$(".remove-size").last().remove();
$(".colors").last().remove();
}
});
$(document).on("click",".add-size",function(){
$(this)
.parent()
.find(".size-input-house")
.html($(this)
.parent()
.find(".size-input-house")
.html()+'<div class="form-group">' +
'<input type="text" class="form-control sizes" placeholder="Size"></div>');
});
$(document).on("click",".remove-size",function(){
if($(".sizes").length !== 1){
$(".sizes").last().remove();
}
});
Notice the $(document).on("click","#add-color",function(){ changes throughout the code. Thanks to the genius who gave an answer above.
Related
I append HTML form with jquery append function but when I click on submit button it doesn't submit
$( "body" ).on( "click", "#addPackage", function() {
packageId = 'package'+ id;
id = id+1;
$('.table tbody').append('<tr id="' + packageId + '"> <form class="" onsubmit="editPackage();return false;" method="post"><td><input type="text" name="package_name" value="" /></td><td><input type="text" name="package_price" value="" /></td><td><input type="text" name="package_details" value="" /></td><td><button class="btn btn-success" ><i class="fa fa-save"></i></button> <span class="btn btn-danger remove-btn"><i class="fa fa-remove"></i></span></td></form></tr>');
});
This is what you probably want, instead of use <form> (which only execute function editPackage) in <tr> (and it is incorrect was what mentioned in Justinas comment ) you can execute editPackage after click on row-button and read data fro row in this way (i remove <form> from your append string and change <button>):
let id=0;
$( "body" ).on( "click", "#addPackage", function() {
packageId = 'package'+ id;
id = id+1;
//console.log($('.table tbody'));
$('.table tbody').append('<tr id="' + packageId + '"> <td><input type="text" name="package_name" value="" /></td><td><input type="text" name="package_price" value="" /></td><td><input type="text" name="package_details" value="" /></td><td><button class="btn btn-success" onclick="editPackage(this)">submit<i class="fa fa-save"></i></button> <span class="btn btn-danger remove-btn"><i class="fa fa-remove"></i></span></td></tr>');
});
function editPackage(btn) {
let tds =btn.parentNode.parentNode.children
let v1=tds[0].children[0].value;
let v2=tds[1].children[0].value;
let v3=tds[2].children[0].value;
console.log('submit', v1, v2, v3);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="addPackage">add</button>
<table class="table"><tbody></tbody><table>
Below is my code for cloning the timepicker.
I have tried to remove hasDatepicker class on click and tried to call timepicker again but its not working. Below is my code
$(document).ready(function() {
var clone_index = 0;
console.log(max_value);
$("#add_period_break").click(function() {
$(".start_time").removeClass('hasDatepicker');
$('.start_time').timepicker({});
clone_index = clone_index + 1;
//$("#countform").val(clone_index);
console.log("add" + clone_index);
$(this).parent().before($("#clone").clone().attr("id", "clone" + clone_index));
$("#clone" + clone_index).css("display", "inline");
$("#clone" + clone_index + " :input").each(function() {
$(this).attr("name", $(this).attr("name") + clone_index);
$(this).attr("id", $(this).attr("id") + clone_index);
$("#countform").val(clone_index);
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<div id='clone'>
<div class="form-group">
<label for="exampleInputEmail1">Start Time</label>
<input type="text" name="start_time" id="start_time" class="form-control start_time" readonly="readonly" value="" placeholder="Start Time">
</div>
</div>
<div id="box-footer">
<button type="button" class="btn btn-success" name="add_period_break" id="add_period_break"><i class="glyphicon glyphicon-plus"></i> Add Periods/ Breaks</button>
<button type="submit" class="btn btn-primary"> Submit</button>
</div>
You want to use jQuery timepicker
You don't need to remove hasDatepicker class, because its will never assigned to it.
Also there is a variable max_value which is not assigned. so please remove it.
Please check below code:
$(document).ready(function () {
var clone_index = 0;
$('.start_time').timepicker({});//For first time on page load
$("#add_period_break").click(function () {
clone_index = clone_index + 1;
$(this).parent().before($("#clone").clone().attr("id", "clone" + clone_index));
$("#clone" + clone_index).css("display", "inline");
$("#clone" + clone_index + " :input").each(function () {
$(this).attr("name", $(this).attr("name") + clone_index);
$(this).attr("id", $(this).attr("id") + clone_index);
$("#countform").val(clone_index);
});
$('.start_time').timepicker({});///to apply timepicker on newly added textbox
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.js"></script>
<div id='clone'>
<div class="form-group">
<label for="exampleInputEmail1">Start Time</label>
<input type="text" name="start_time" id="start_time" class="form-control start_time" readonly="readonly" value="" placeholder="Start Time">
</div>
</div>
<div id="box-footer">
<button type="button" class="btn btn-success" name="add_period_break" id="add_period_break"><i class="glyphicon glyphicon-plus"></i> Add Periods/ Breaks</button>
<button type="submit" class="btn btn-primary"> Submit</button>
</div>
I have made contact list app which displays contact details. By Default it shows 2 contact details.
In index.html I have made 2 functions called showContacts() and editContact(id).
I am dynamically populating div tags i.e editcontact & contactlist in index.html
When I click on edit button it should show 3 input elements to take input from user and one submit button I tried to implement it (see code below) but only search bar disappear's and only default contacts are shown which should not be shown and it should display editing form.
var array = [];
function Person(fullName, number, group) {
this.fullName = fullName;
this.number = number;
this.group = group;
array.push(this);
}
Person.prototype.getFullName = function() {
return this.fullName + ' ' + this.number + ' ' + this.group;
}
var p1 = new Person("Jonathan Buell", 5804337551, "family");
var p2 = new Person("Patrick Daniel", 8186934432, "work");
console.log(array);
document.getElementById("contactlist").innerHTML = '';
function showContacts() {
for (var i in array) {
var id = i;
contactlist.innerHTML +=
`
<ul>
<div>
<p>Name: ` + p1.fullName + `</p>
<p>Number: ` + p1.number + `</p>
<p>Group: ` + p1.group + `</p>
<button type="button" class="btn btn-warning" onclick="editContact(` + id + `)">Edit</button>
<button type="button" class="btn btn-danger">Delete</button>
</div>
`
}
}
showContacts();
function editContact(id) {
document.getElementById("search").style.display = 'none';
document.getElementById("contactList").style.display = 'none';
document.getElementById("editcontact").style.display = '';
document.getElementById("editcontact").innerHTML =
`<div>
<input type="text" placeholder="Name here" id="nameInput2" value="` + array[id].fullName + `">
<input type="tel" placeholder="Number here" id="numberInput2" value="` + array[id].number + `">
<input type="text" placeholder="Group Here" id="groupInput2" value="` + array[id].group + `">
<button type="button" class="btn btn-success">Submit</button>
</div>`;
}
<div class="header">
<div id="dropdown">
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Sort by Group
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li>All</li>
<li>Work</li>
<li>Family</li>
</ul>
</div>
</div>
<div class="title">
<h2>All Contacts</h2>
</div>
<div class="button" id="addButton">
<p>
<a href="#">
<span class="glyphicon glyphicon-plus-sign"></span>
</a>
</p>
</div>
</div>
<div id="search">
<form>
<div class="input-group">
<input type="text" class="form-control" placeholder="Search">
<div class="input-group-btn">
<button class="btn btn-default" type="submit">
<i class="glyphicon glyphicon-search"></i>
</button>
</div>
</div>
</form>
</div>
<div id="contactlist">
</div>
<div id="editcontact">
</div>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="index.css">
screenshots :
1) Before on click editContact :
2) After onclick editContact :
Live demo can be seen here :
https://jsfiddle.net/w2hoqmts/
A couple of things.
You made a typo with your contactlist in your html (should be contactList).
In your loop for showContacts you are setting id as index and should be like
function showContacts() {
for (var i in array) {
var id = array[i].number;
document.getElementById("contactList").innerHTML +=
'<ul><div><p>Name: ' + array[i].fullName + '</p><p>Number: ' + array[i].number + '</p><p>Group: ' + array[i].group + '</p>' +
'<button type="button" class="btn btn-warning" onclick="editContact(' + id + ')">Edit</button>' +
'<button type="button" class="btn btn-danger">Delete</button>' +
'</div>';
}
}
Your editContact method is using the id as an index (as previous), which is wrong. You could do something like this instead (see code below). I filter the array with people based on the unique id provided from the link when you click edit.
function editContact(id) {
var obj = array.filter(function (ele) {
console.dir(ele);
if (ele.number === id) return ele;
});
console.dir(obj);
document.getElementById("search").style.display = 'none';
document.getElementById("contactList").style.display = 'none';
document.getElementById("editcontact").style.display = '';
document.getElementById("editcontact").innerHTML =
'<div>'+
'<input type="text" placeholder="Name here" id="nameInput2" value="'+ obj[0].fullName + '">'+
'<input type="tel" placeholder="Number here" id="numberInput2" value="' + obj[0].number + '">' +
'<input type="text" placeholder="Group Here" id="groupInput2" value="' + obj[0].group + '">' +
'<button type="button" class="btn btn-success">Submit</button>'+
'</div>';
}
I've made a updated fiddle based on your own
https://jsfiddle.net/w2hoqmts/3/
Following changes should be made in editContact() and showContacts() function.
function showContacts(){
for(var i in array){
var id = i;
contactlist.innerHTML +=
`
<ul>
<div>
<p>Name: `+ p1.fullName +`</p>
<p>Number: `+ p1.number +`</p>
<p>Group: `+ p1.group +`</p>
<button type="button" class="btn btn-warning" onclick="editContact(`+ id +`)">Edit</button>
<button type="button" class="btn btn-danger">Delete</button>
</div>
`
}
}
showContacts();
function editContact(id) {
document.getElementById("search").style.display = 'none';
document.getElementById("contactlist").style.display = 'none';
document.getElementById("editcontact").style.display = '';
document.getElementById("editcontact").innerHTML =
`<div>
<input type="text" placeholder="Name here" id="nameInput2" value="`+array[id].fullName+`">
<input type="tel" placeholder="Number here" id="numberInput2" value="`+array[id].number+`">
<input type="text" placeholder="Group Here" id="groupInput2" value="`+array[id].group+`">
<button type="button" class="btn btn-success">Submit</button>
</div>`;
}
I am having trouble getting one of my buttons to append data to a HTML text area. The button in question is "BPI". I am trying to append a few digits of pi to my first text area. The other 4 buttons operate within the 2nd text area. Thank you in advance for your help.
$(document).ready(function() {
$('#BAddition').click(function(e) {
$('#TOperator').val() += "+";
})
$('#BSubtract').click(function(e) {
$('#TOperator').val() += "-";
})
$('#BMultiplication').click(function(e) {
$('#TOperator').val() += "*";
})
$('#BDivision').click(function(e) {
$('#TOperator').val() += "/";
})
$('#BPI').click(function(e) {
$('#TFirstnum').val() += "3.141592657";
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Input:<br>
<textarea id="TFirstnum"></textarea>
<textarea id="TOperator"></textarea>
<textarea id="TSecondnum"></textarea>
<label id="LEquals"></label>
<br>
<button type="button" onclick="" id="BAddition">+</button>
<button type="button" onclick="" id="BSubtract">-</button>
<button type="button" onclick="" id="BDivision">/</button>
<button type="button" onclick="" id="BMultiplication">*</button>
<button type="button" onclick="" id="BPI">π</button>
<button type="button" onclick="" id="BEquals">=</button>
If you want to add a value use $(yourObject).val("yourvalue")
If you want to add a value to the already existing value use $(yourObject).val($(yourObject).val() + "yourvalue")
Working example below
$(document).ready(function() {
$('#BAddition').click(function(e) {
$('#TOperator').val($('#TOperator').val() + "+");
})
$('#BSubtract').click(function(e) {
$('#TOperator').val($('#TOperator').val() + "-");
})
$('#BMultiplication').click(function(e) {
$('#TOperator').val($('#TOperator').val() + "*");
})
$('#BDivision').click(function(e) {
$('#TOperator').val($('#TOperator').val() + "/");
})
$('#BPI').click(function(e) {
$('#TOperator').val($('#TOperator').val() + "3.141592657");
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Input:<br>
<textarea id="TFirstnum"></textarea>
<textarea id="TOperator"></textarea>
<textarea id="TSecondnum"></textarea>
<label id="LEquals"></label>
<br>
<button type="button" onclick="" id="BAddition">+</button>
<button type="button" onclick="" id="BSubtract">-</button>
<button type="button" onclick="" id="BDivision">/</button>
<button type="button" onclick="" id="BMultiplication">*</button>
<button type="button" onclick="" id="BPI">π</button>
<button type="button" onclick="" id="BEquals">=</button>
When you want to set an element's value attribute using Jquery, you need to set the value inside the parantheses: .val('newValue').
When you want to get an element's value, use blank parantheses: var x = elem.val().
So to concatenate (or append) values, you should use:
$('#TOperator').val($('#TOperator').val() + '+');
A longer version to elaborate:
var expr = $('#TOperator').val(); // Get current value
expr += '+'; // Concatenate the + sign
$('#TOperator').val(expr); // Set the new value
You are useing += which does not work. You have to get the value, and then set the value;
$('#BAddition').click(function(e) {
$('#TOperator').val( $('#TOperator').val() + "+");
});
You're repeating yourself a lot. I suggest you change the html a bit and create a much neater function.
<button type="button" class="MathSign" data-sign="+">+</button>
<button type="button" class="MathSign" data-sign="-">-</button>
<button type="button" class="MathSign" data-sign="/">/</button>
<button type="button" class="MathSign" data-sign="*">*</button>
<button type="button" id="BPI">π</button>
<button type="button" class="MathSign" data-sign="=">=</button>
// handle the [+ - * / =] in one go:
$('.MathSign').on('click', function(){
$('#TOperator').val( $('#TOperator').val() + $(this).data('sign'));
// Or,you can drop the data-sign attribute and use the content of the button
$('#TOperator').val( $('#TOperator').val() + this.innerHTML);
})
$(selector).val() is used to get the value of the input box.
If you want to set the value, you need to pass the value $(selector).val(value).
I have modified your example. One thing you need to consider is when you do $(selector).val(), you will get string. If you want to have addition instead of concatenation of two strings, You should probably use parseInt
$(document).ready(function() {
$('#BAddition').click(function(e) {
$('#TOperator').val($('#TOperator').val() + "+");
})
$('#BSubtract').click(function(e) {
$('#TOperator').val($('#TOperator').val() + "-");
})
$('#BMultiplication').click(function(e) {
$('#TOperator').val($('#TOperator').val() + "*");
})
$('#BDivision').click(function(e) {
$('#TOperator').val($('#TOperator').val() + "/");
})
$('#BPI').click(function(e) {
$('#TFirstnum').val($('#TFirstnum').val() + "3.141592657");
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Input:<br>
<textarea id="TFirstnum"></textarea>
<textarea id="TOperator"></textarea>
<textarea id="TSecondnum"></textarea>
<label id="LEquals"></label>
<br>
<button type="button" onclick="" id="BAddition">+</button>
<button type="button" onclick="" id="BSubtract">-</button>
<button type="button" onclick="" id="BDivision">/</button>
<button type="button" onclick="" id="BMultiplication">*</button>
<button type="button" onclick="" id="BPI">π</button>
<button type="button" onclick="" id="BEquals">=</button>
I would like to detect when a button is clicked in a div which has multiple buttons which act like checkboxes for mobile optimized application.
This is what I have as HTML:
When it was only normal checkboxes instead of button like checkboxes 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 be triggered at all but without success:
$(document).on('click', 'input:button.modifier', function () {
});
Bottom line is that 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 will not deselect some button.
Update
Code I'm using 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');
I read over your question, and you weren't far off in your attempt. I put together a pen to demonstrate how you can do this: http://codepen.io/aecend/pen/mjklu
The checkbox inputs aren't being replaced with button elements, the labels are only styled so that they appear to be buttons. In the jQuery, you would still need to use the checkbox selector and instead of disabling the checkboxes themselves (there's no point, they're hidden), simply add the "disabled" class to the other labels once five options are selected.
Here's the HTML I used, I only added the btn-default class to make the buttons more visible:
<html>
<head>
<meta charset="utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<title>Hamburger Builder v2.0</title>
</head>
<body class="sitecolor">
<div id="modifiersDiv" class="modal-div" style="width: 250px; margin: 0 auto;">
You can select a maximum of 5 option(s)
<br>
<div class="btn-group btn-block" data-toggle="buttons">
<label class="btn btn-default btn-checkbox btn-block" style="margin-bottom: 2px;">
<input class="modifier" type="checkbox" value="67739" name="Bacon" data-price="1" data-name="Bacon" data-itemid="a4007375-e037-46ce-be39-57ca2d1872e0" data-quantity="1">
Bacon
</label>
<br>
<label class="btn btn-default btn-checkbox btn-block" style="margin-bottom: 2px;">
<input class="modifier" type="checkbox" value="67740" name="Lettuce" data-price="1" data-name="Lettuce" data-itemid="a4007375-e037-46ce-be39-57ca2d1872e1" data-quantity="1">
Lettuce
</label>
<br>
<label class="btn btn-default btn-checkbox btn-block" style="margin-bottom: 2px;">
<input class="modifier" type="checkbox" value="67741" name="Tomato" data-price="1" data-name="Tomato" data-itemid="a4007375-e037-46ce-be39-57ca2d1872e2" data-quantity="1">
Tomato
</label>
<br>
<label class="btn btn-default btn-checkbox btn-block" style="margin-bottom: 2px;">
<input class="modifier" type="checkbox" value="67742" name="Cheese" data-price="1" data-name="Cheese" data-itemid="a4007375-e037-46ce-be39-57ca2d1872e3" data-quantity="1">
Cheese
</label>
<br>
<label class="btn btn-default btn-checkbox btn-block" style="margin-bottom: 2px;">
<input class="modifier" type="checkbox" value="67743" name="Onions" data-price="1" data-name="Onions" data-itemid="a4007375-e037-46ce-be39-57ca2d1872e4" data-quantity="1">
Onions
</label>
<br>
<label class="btn btn-default btn-checkbox btn-block" style="margin-bottom: 2px;">
<input class="modifier" type="checkbox" value="67744" name="Pickles" data-price="1" data-name="Pickles" data-itemid="a4007375-e037-46ce-be39-57ca2d1872e5" data-quantity="1">
Pickles
</label>
<br>
</div>
</div>
</body>
and here is the snippet of JavaScript you'll need, it's almost exactly what you had, except Bootstrap-ready now:
$(document).on('change', 'input:checkbox.modifier', function () {
var totalChecked = $("#modifiersDiv :checkbox:checked").size();
var maximum = 5; //parseInt($('#Maximum').val())
if (totalChecked === maximum) {
$(this).parent().siblings(":not(.active)").addClass("disabled");
} else {
$("#modifiersDiv label.disabled").removeClass("disabled");
}
});
Add a class to the selected buttons, and on each click count the number of buttons that are checked at that moment:
$(".button:not(.selected)").click(function(){
$(this).addClass("selected");
if($(".button.select").length>4){
$(".button").addClass("disabled");
}
}
You might want to add something that will also de-select a button once it's clicked twice...
Try this :))))
var count=0;
$("#modifiersDiv").find(".modifier").click(function(){
if($(this).is(":checked")){
count++;
}else{
count--;
}
if(count>=$('#Maximum').val())
$("#modifiersDiv").find(".modifier").not(':checked').attr("disabled", true);
else
$("#modifiersDiv").find(".modifier").not(':checked').attr("disabled", false);
});