I'm trying to limit a max number selectable for checkboxes and their relative labels. Checkboxes work fine but labels are still selectable more than the limit.
My html input is formed like this:
<div data-toggle="buttons" class="btn-group bizmoduleselect">
<label id="b-<?php echo $term->term_id; ?>" class="btn btn-default <?php echo $labelchk ?>">
<div class="bizcontent">
<input id="youaresure" type="checkbox" name="email_cats[]" <?php echo $chk ?> value="<?php echo $term->term_id ?>" />
<h5><?php echo $term->name ?></h5>
</div>
</label>
</div>
and my jQuery to limit checkboxes and labels is like:
var $checkboxes = $('input[id="youaresure"]');
var $parent = $checkboxes.parent('label');
var max = 5;
$checkboxes.show();
$checkboxes.change(function () {
$(this).prop('checked', function () {
if ($(this).is(':checked')) {
return ($checkboxes.filter(':checked').length <= max) ? true : false;
}
});
});
$parent.show();
$parent.change(function () {
$(this).prop('class', function () {
if ($(this).is('active')) {
return ($parent.filter('active').length <= max) ? true : false;
}
}
Basically, php inserts an active class to labels parents of inputs:checked and I should prevent both labels and inputs to be selected if more than 5.
For checkboxes is fine but parent labels are still selectable and basically are the visible ones.
EDIT: I've forgotten to indicate that it works with bootstrap and each checkbox is threaten like a button!
There is no change event on <label>. Everything should be done in event handler of the <input>
My suggestion is you disable the other checkboxes when limit is reached.
Following will toggle the active class on label as well as disable/enable unchecked inputs
var max = 5;
var $checkboxes = $(':checkbox').change(function(e) {
var maxChecked = $checkboxes.filter(':checked').length === max;
// disable/enable others based on limit
$checkboxes.not(':checked').prop('disabled', maxChecked);
// toggle label active based on checked state
$(this).closest('label').toggleClass('active', this.checked);
});
DEMO
This doesn’t work because of label has no change handler. Maybe you should better to add your some code into your checkbox’s property check function that removes ‘active’ class of parent labels if necessary.
Related
I want a teacher to select multiple classes when he click a button, the classes are selected from the database and displayed via an tag. I have made a function which makes a new select and displays another list of the classes, however my foreach loop doesn't seem to work...
Here's my JQuery which is inside a 'script' tag in the HTML:
$(document).ready(function() {
var max_fields = 10; //maximum input boxes allowed
var wrapper = $(".input_fields_wrap"); //Fields wrapper
var add_button = $(".add_field_button"); //Add button ID
var x = 1; //initlal text box count
$(add_button).click(function(e){ //on add input button click
e.preventDefault();
if(x < max_fields){ //max input box allowed
x++; //text box increment
$(wrapper).append('<div><select name="klas" style="width:40%;"><?php foreach ($klas as $klas) {echo "<option value='".$klas->getCode()."'>".$klas->getCode()."</option>"; } ?></select>Verwijder</div>'); //add input box
}
});
$(wrapper).on("click",".remove_field", function(e){ //user click on remove text
e.preventDefault(); $(this).parent('div').remove(); x--;
})
});
This is the button and the corresponding div's:
<div class="input_fields_wrap">
<button type="button" class="add_field_button">Add More Fields</button>
<div>
<select name="klas">
<?php foreach ($klas as $klas) {
echo "<option value='".$klas->getCode()."'>".$klas->getCode()."</option>"; } ?>
</select>
</div>
</div>
Does someone have any idea how I can achieve the same result from JQuery as from the regular php/html select box?
put your array in arr format in this answer and append to the div wherever you want on page currently i use select_div
<div class="input_fields_wrap">
<button type="button" class="add_field_button">Add More Fields</button>
<div id ="select_div">
</div>
</div>
<script type="text/javascript">
var arr = [
{val : 1, text: 'One'},
{val : 2, text: 'Two'},
{val : 3, text: 'Three'}
];
var sel = $('<select>').appendTo('#select_div');
$(arr).each(function() {
sel.append($("<option>").attr('value',this.val).text(this.text));
});
sel.append("</select>")
</script>
Found it. Your problem is that you use the same value name for both $klas array as well as internal foreach variable. While this is not technically incorrect, notice that after foreach $klas variable will be equal to last element of the array - not the array itself.
Since you were using this loop inside javascript it was tough to spot, and local test with foreach showed that everything is fine.
Anyway please update your code (everywhere were it is used) from:
<?php
foreach ($klas as $klas) {
$klas->getCode()
}
?>
to
<?php
foreach ($klas as $k) {
$k->getCode();
}
?>
Below is my code, I want to get the count of checked checkboxes of all pages in my DataTable. Please advice how to proceed
<td align="center"><input type="checkbox" align="center" id="all" class="groupCheckBox" name="emails[]" value=' . $user['id'] . '></td>
Below code I used for get the values of checked boxes in all pages on button click
$('#merge_button').click(function () {
var id = "";
var oTable = $("#userTable").dataTable();
$(".groupCheckBox:checked", oTable.fnGetNodes()).each(function () {
if (id != "") {
id = id + "," + $(this).val();
} else {
id = $(this).val();
}
document.getElementById("email").value = id;
});
});
but now I want to count the checkedboxes without button click function whenever user clicked on checkboxes and deduct count when unchecking boxes . pls advice
var table = $("#userTable").DataTable();
var countchecked = table
.rows()
.nodes()
.to$() // Convert to a jQuery object
.find('input[type="checkbox"].groupCheckBox:checked').length;
Uses the most recent API
"...please be aware that using deferRender will cause some nodes to be created only when they are required for display, so they might not be immediately available when this method is called." from https://datatables.net/reference/api/rows().nodes()
Quite easy.
$("td input[type='checkbox']:checked").length;
I have checkboxe that will dynamically appear number of times based on my database. Each checkbox Id is generated dynamically. Where initial value of $i is 1.
<input type="checkbox" name="ch[]" id="<?php echo $i - 1;?>" />
Now want to set value of each selected checkbox to 1 and 0 to all unselected checkbox in real time . Plz help me.
If I understood correctly, to set values in real time you need to do the following:
$("[name='ch[]']").on("change", function() {
this.value = +this.checked;
});
DEMO: http://jsfiddle.net/MMSFB/
If I understand correctly you want to toggle the values of the checkboxes. I would suggest using jquery and something like this:
php:
<input type="checkbox" class="toggleable" name="ch[]" id="<?php echo $i - 1;?>" />;
javascript:
$(".toggleable").each( function(i, elem) {
elem.checked=!elem.checked;
});
I currently have a code that shows a DIV based on two checkboxes. Currently, you can select both checkboxes and both DIVs will show. I do not want this to occur. How can I make it so you select both checkboxes it shows another DIV?
In summary, one checkbox shows one DIV, another checkbox shows another, both will show something completely else.
<input type="checkbox" name="checkbox_insert"
id="checkbox_insert" value="insert">Insert<br>
<input type="checkbox" name="checkbox_update"
id="checkbox_update" value="update">Update</p>
<script type="text/javascript">
$('#checkbox_insert').change(function() {
$('#insert_div').toggle();
});
$('#checkbox_update').change(function() {
$('#update_div').toggle();
});
</script>
<div id="insert_div" style="display:none">
INSERT
</div>
<div id="update_div" style="display:none">
UPDATE
</div>
<div id="both_div" style="display:none">
BOTH
</div>
var $i = $('#checkbox_insert, #checkbox_update'),
$d = $('div'),
$b = $d.filter('#both_div');
$i.change(function () {
$b.toggle($i.filter(':checked').length === $i.length);
$d.filter('#' + this.value + '_div').toggle(this.checked);
});
http://jsfiddle.net/EeJXy/
You'll want something like this (using jQuery):
EDIT Updated booleans in toggle() (working example here http://jsfiddle.net/uYUK2/):
$('input[type="checkbox"]').on('change', function() {
var inserted = $('#checkbox_insert').prop('checked');
var updated = $('#checkbox_update').prop('checked');
$('#both_div').toggle(inserted && updated);
$('#insert_div').toggle(inserted && !updated);
$('#update_div').toggle(updated && !inserted);
});
I want to get the value of the checkbox when #catDelete is clicked.
Below is the html code
<?php $i=1; do { ?>
<input type="checkbox" value="<?php echo $row_cat['cat']; ?>" class="checkboxcat" id="<?php echo $i; ?>" name="catcheckbox" style="border:#cccccc 1px solid; background-color:#fff;"><?php echo $row_cat['cat']; ?>
<span id="CatDelete" style="position:relative; left:10px; color:#ff0000; font-size:10px;">Delete</span>
<?php $i++; } while ($row_cat = mysql_fetch_assoc($cat)); ?>
jquery code - It gives me the value of the first checkbox
$('#CatDelete').click(function(){
alert($('.checkboxcat').attr('id'));
});
Any help appreciated. Did search if there was a duplicate question, but did not find.
You haven't shown much of your stucture, but it looks like the checkbox is a sibling element prior to the span. If so:
$("#CatDelete").click(function() {
var val = $(this).prevAll('input').first().val();
console.log(val);
});
That starts from the clicked element, works backward through siblings looking for input elements, grabs the first one, and gets its value.
But you've edited the question now to say it's in a loop. You cannot have more than one element with the same id ("CatDelete"). You'll need to change the span to use a class instead, and then change the above to use that class. So for instance, if you change it to use the class "CatDelete", then:
// v--- Note the change
$(".CatDelete").click(function() {
var val = $(this).prevAll('input').first().val();
console.log(val);
});
Live Working Copy | Source
But I think I'd probably adjust the structure slightly so that you're not hunting through sibling elements like that. If you put each pair (checkbox and button) inside a container, like a div, you can do something a bit more straightforward to find the matching input:
var val = $(this).closest('div').find('input').val();
E.g.
$(".CatDelete").click(function() {
var val = $(this).closest('div').find('input').val();
console.log("The value for the checkbox is: " + val);
});
Live Working Copy | Source