I'm attempting to only allow the user to check checkboxes in chronological order.
<table id="status">
<tr><td>Ready <input type="checkbox"></td></tr>
<tr><td>Set <input type="checkbox"></td></tr>
<tr><td>Go <input type="checkbox"></td></tr>
</table>
User is not allowed to uncheck the checkboxes and only allowed to click in the order Ready, Set, Go. For this i can only add events to checkboxes and not the td element.
$("#status input[type='checkbox']").on("change",function(event) {
if($(this).parents("tr:first").prev("tr").length==0) {
var first_checkbox = 1;
} else {
var first_checkbox = 0;
}
if($(this)
.parents("tr:first")
.prev("tr")
.find("input[type='checkbox']")
.is(":checked") || first_checkbox==1) {
$(this).attr("checked",true);
}
}
});
This only allows a click if the previous checkbox is clicked but how do i prevent a checkbox being unclicked?
Programatically this is quite simple:
Disable all checkboxes, except for the first one, at runtime
When a checkbox is checked, disable it after that, and enable the next checkbox
See the demo below, it should work as intended:
$(function() {
$('#status input[type="checkbox"]').each(function() {
// Disable all but the first checkbox
if ($(this).closest('tr').index() !== 0) {
$(this).prop('disabled', true);
}
}).on('change', function() {
// Once checked, disable it
$(this).prop('disabled', true);
// Then enable the next checkbox
$(this).closest('tr').next('tr').find('input[type="checkbox"]').prop('disabled', false);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="status">
<tr>
<td>Ready
<input type="checkbox" />
</td>
</tr>
<tr>
<td>Set
<input type="checkbox" />
</td>
</tr>
<tr>
<td>Go
<input type="checkbox" />
</td>
</tr>
</table>
Warning: When input elements are disabled, their values are not sent when a form is submitted. You might want to disable interaction in other ways instead of relying on the boolean attribute disabled. #Rich has an alternative solution of disabling pointer events, which I have modified my demo for. I have added some CSS styles so users can tell if a checkbox is clickable or not:
$(function() {
$('#status input[type="checkbox"]').each(function() {
// Disable all but the first checkbox
if ($(this).closest('tr').index() !== 0) {
$(this).closest('tr').addClass('disabled');
}
}).on('change', function() {
// Once checked, disable it
$(this).closest('tr').addClass('disabled checked');
// Then enable the next checkbox
$(this).closest('tr').next('tr').removeClass('disabled');
});
});
tr {
background-color: #BEEB9F;
}
tr.disabled {
background-color: #FFFF9D;
}
tr.disabled.checked {
background-color: #97C4A6;
}
tr.disabled input {
pointer-events: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="status">
<tr>
<td>Ready
<input type="checkbox" />
</td>
</tr>
<tr>
<td>Set
<input type="checkbox" />
</td>
</tr>
<tr>
<td>Go
<input type="checkbox" />
</td>
</tr>
</table>
This should do exactly what your looking for.
$("#status input[type='checkbox']").on("click", function (e) {
var checkbox = $(this);
if (checkbox.is(":checked") {
// do the confirmation thing here
e.preventDefault();
return false;
}
});
You can use disabled attribute for the checkboxes and enable or disable them occasionally:
$(document).on('click', 'input', function(e) {
var that = $(this);
var id = that.attr('id');
var set = $('#set');
var go = $('#go');
if (id == 'ready') {
if (!set.is(':checked') && !go.is(':checked')) {
if (that.is(':checked')) {
set.removeAttr('disabled');
} else {
set.attr('disabled', true);
go.attr('disabled', true);
}
} else {
e.preventDefault();
}
}
if (id == 'set') {
if (!go.is(':checked')) {
if (that.is(':checked')) {
go.removeAttr('disabled');
} else {
go.attr('disabled', true);
}
} else {
e.preventDefault();
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id="status">
<tr><td>Ready <input id="ready" type="checkbox"></td></tr>
<tr><td>Set <input id="set" type="checkbox" disabled></td></tr>
<tr><td>Go <input id="go" type="checkbox" disabled></td></tr>
</table>
Just change
$(this).attr("checked",true); to $(this).prop('checked', true)
and add the following:
if( first_checkbox != 1 && !$(this).parents('tr:first').prev('tr').find('input[type="checkbox"]').is(":checked")) {
$(this).prop('checked', false);
}
Here is an example without disabling the checkboxes: https://jsfiddle.net/t338vu33/
The checkboxes has to be unchecked or checked in a chronological order:
var current = 0;
$("#status input[type='checkbox']").on("change", function(event) {
var selectedIndex = $('input:checkbox').index( $(this) );
if ($(this).is(":checked")) {
if(selectedIndex != current)
$(this).prop('checked', false);
else
current ++;
}
else{
if(selectedIndex != current-1)
$(this).prop('checked', true);
else
current --;
}
});
Related
I'd like to amend my script so if ANY of the 2 checkboxes are selected, it says 'Woo hoo!'. Where am I going wrong?
HTML:
0:<input type="checkbox" name="remove_0" id="remove_0">
<br>
1:<input type="checkbox" name="remove_1" id="remove_1">
<br><br>
<button id="submitTCP">
Hit me!
</button>
Javascript:
$("#submitTCP").click(function(event){
event.preventDefault();
if ($('input:checkbox', this).is(':checked')) {
alert('Woo hoo!');
} else {
alert('Please select something!');
return false;
}
})
JSFiddle:
https://jsfiddle.net/6qh0c8fm/
your this is parent submit button not checkbox
$("#submitTCP").click(function(event){
event.preventDefault();
if ($('input:checkbox').is(':checked')) {
alert('checkboxes checked');
} else {
alert('Please select something!');
return false;
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
0:<input type="checkbox" name="remove_0" id="remove_0">
<br>
1:<input type="checkbox" name="remove_1" id="remove_1">
<br><br>
<button id="submitTCP">
Hit me!
</button>
There is no peramanent function to check either checkbox is checked but it can be done using click and getting it's checked property.
$('#cb').click(function () {
if (this.checked == true) {
console.log('checked');
}
else {
console.log('un-checked');
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" id="cb"/>
I design my checkbox with icheck plugin and worked with one and multiple checkbox(Check all) like this :
HTML :
<div>Using Check all function</div>
<div id="action" class="action-class" style="display:none">SHOW ME</div>
<div id="selectCheckBox">
<input type="checkbox" class="all" />Select All
<input type="checkbox" class="check" />Check Box 1
<input type="checkbox" class="check" />Check Box 2
<input type="checkbox" class="check" />Check Box 3
<input type="checkbox" class="check" />Check Box 4
</div>
JS:
$(function () {
var checkAll = $('input.all');
var checkboxes = $('input.check');
$('input').iCheck();
checkAll.on('ifChecked ifUnchecked', function(event) {
if (event.type == 'ifChecked') {
checkboxes.iCheck('check');
} else {
checkboxes.iCheck('uncheck');
}
});
checkboxes.on('ifChanged', function(event){
if(checkboxes.filter(':checked').length == checkboxes.length) {
checkAll.prop('checked', 'checked');
} else {
checkAll.removeProp('checked');
}
checkAll.iCheck('update');
});
});
I have <div id="action" class="action-class" style="display:none">SHOW ME</div> and display:none.
Now, I need to show div if checked any checkbox(all and one) input.
how do can I show this!?
DEMO JSFIDDLE
Can do something like this that toggles the div based on whether or not any boxes are checked
function toggleDiv(){
var showDiv=checkboxes.filter(':checked').length;
$('#action').toggle(showDiv); /* if boolean argument, toggle will hide/show based on boolean */
}
checkboxes.on('ifChanged', function(event){
if(checkboxes.filter(':checked').length == checkboxes.length) {
checkAll.prop('checked', 'checked');
} else {
checkAll.removeProp('checked');
}
checkAll.iCheck('update');
toggleDiv();
});
DEMO
checkboxes.on('ifChanged', function(event){
if(checkboxes.filter(':checked').length == checkboxes.length) {
checkAll.prop('checked', 'checked');
} else {
checkAll.removeProp('checked');
}
checkAll.iCheck('update');
//Add this -----------------------------------
if(checkboxes.filter(':checked').length > 0) {
$("#action").show();
}
else{
$("#action").hide();
}
});
Demo : jsfiddle
How do I add a checkbox that can check all the checkboxes if it's checked?
How can I add show/hide functionality to the "check all" checkbox.
The submit button also need to be showed if the check all checkbox is checked.
$(document).ready(function() {
var $submit = $("#submit_prog").hide(),
$cbs = $('input[name="prog"]').click(function() {
$submit.toggle( $cbs.is(":checked") );
});
});
<input type="checkbox" name="?" value="?"> // check all checkbox
<input type="checkbox" name="prog" value="1">
<input type="checkbox" name="prog" value="2">
<input type="submit" id="submit_prog" value='Submit' />
assumption id of select all chckbox is selall.
create a class for all the check box you want to select using select all
$('#selall').click(function(event) {
if(this.checked) {
// Iterate each checkbox
$('.yourchckbox').each(function() {
this.checked = true;
});
$('#submit_prog').show();
}
else {
$('.yourchckbox').each(function()
{ this.checked = false; });
$('#submit_prog').hide()
}
});
$('.yourchckbox').click(function(event) {
if(!(this.checked)) {
$('#selall').prop('checked', false);
}
});
Give the select all check box an id, say selectall then
$('#selectall').click(function(){
if (this.checked){
$('input[name="prog"]').prop('checked', true);
$submit.toggle( true );
}
});
if you want the checkboxes to be unselected if the select all in unselected
$('#selectall').click(function(){
$('input[name="prog"]').prop('checked', this.checked);
$submit.toggle( this.checked);
});
$cbs = $('input[name="prog"]').click(function() {
$submit.toggle( $cbs.filter(':checked').length == 0 );
if (!this.checked) $('#selectall').prop('checked', false);
});
Try
$('input:checkbox[name!="prog"]').click(function(){
$('input:checkbox[name="prog"]').prop('checked', $(this).is(':checked'))
})
Or if you can change checkbox id to selall
$('#selall').click(function(){
$('input:checkbox').prop('checked', $(this).is(':checked'))
})
Its quite simple.
lets name this checkbox <input type="checkbox" name="check_all" value="1">
And now add event:
$('input[name="check_all"]').click( function() {
if( $(this).is(':checked') ) {
$('input[name="prog"]').attr('checked', 'checked');
} else {
$('input[name="prog"]').removeAttr('checked');
}
$('input[name="prog"]:eq(0)').change(); //firing event which we will catch
});
Then we should check if all input[name="prog"] are checked:
$('input[name="prog"]').change( function() {
if( $('input[name="prog"]:not(:checked)').length ) {
$('#submit_prog').hide();
} else {
$('#submit_prog').show();
}
});
select all checkboxes on #all check and check #all when all checkboxes are checked
<SCRIPT language="javascript">
$(function(){
$("#all").click(function () {
$('.one').attr('checked', this.checked);
if (this.checked) {$('#submit_prog').hide();}
(this.checked)?$('#submit_prog').show():$('#submit_prog').hide();
});
$(".one").click(function(){
if($(".one").length == $(".one:checked").length) {
$("#all").attr("checked", "checked");
$('#submit_prog').show();
} else {
$("#all").removeAttr("checked");
$('#submit_prog').hide();
}
});
});
</SCRIPT>
Change id and class of checkboxes
<input type="checkbox" id="all" > // check all checkbox
<input type="checkbox" name="prog" class="one" value="1">
<input type="checkbox" name="prog" class="one" value="2">
I have a links named All and none. When I click on All, I want it to check all checkboxes related with it and change it's link text to none.
When I click again I want it to uncheck all of the checkboxes.
I have some code which I can use to check all boxes with a checkbox. But now I want to check all boxes with a link. Please see, here is this demo code (also on jsfiddle):
<script type="text/javascript">
$(function(){
// add multiple select / deselect functionality
$("#selectall").click(function () {
$('.case').attr('checked', this.checked);
});
// if all checkbox are selected, check the selectall checkbox
// and viceversa
$(".case").click(function(){
if($(".case").length == $(".case:checked").length) {
$("#selectall").attr("checked", "checked");
} else {
$("#selectall").removeAttr("checked");
}
});
});
$(document).ready(function () {
$("input[type=checkbox]").click(updateCount);
updateCount();
function updateCount () {
var count = $("input[type=checkbox].case:checked").length;
$("#count").text(count);
$("#status").toggle(count > 0);
};
});
</script>enter code here
</head>
<body>
<H2>why counting wrong in crome, Ie </H2>
select all
<input type="checkbox" id="selectall"/>
<input type="checkbox" class="case" name="case" value="1"/>
<input type="checkbox" class="case" name="case" value="2"/>
<input type="checkbox" class="case" name="case" value="3"/>
<input type="checkbox" class="case" name="case" value="4"/>
<input type="checkbox" class="case" name="case" value="5"/>
<div id="status">
<p id="count">0</p>
</div>
</body>
http://jsfiddle.net/kdEmH/24/
Try to get it this way, i just guessed a link <a> with an id of #allNone and put the .prop() function to check and uncheck the checkboxes:
$('#allNone').on('click', function (e) {
e.preventDefault();
(this.text == 'Check All') ?
$(this).text('Check None').nextAll('.case').prop('checked', true) :
$(this).text('Check All').nextAll('.case').prop('checked', false);
});
Demo
In your HTML part, add a link like :
Click me to toggle all checkboxes
In your Javascript part, add :
$("a#select_all_link").click(function(){
if($('.case:checked').length > 0)
$('.case').attr('checked', false);
else
$('.case').attr('checked', true);
});
Please see working example here
Edit : Names now changed wrt checkboxes state (checked or not)
Try this: Demo :
Add a <A> tag to html code:
<a id="selectall" href="#">select all</a>
Add this function to java-script code:
$(function(){
var state=true;
$("#selectall").click(function () {
$('.case').attr('checked', state);
state=!state;
var obj = document.getElementById("selectall");
if(state)
{
obj.innerText="select all";
}
else
{
obj.innerText="clear all";
}
});
Complete Code
$(function(){
var state=true;
// add multiple select / deselect functionality
$("#selectall").click(function () {
$('.case').attr('checked', state);
state=!state;
var obj = document.getElementById("selectall");
if(state)
{
obj.innerText="select all";
}
else
{
obj.innerText="clear all";
}
});
// if all checkbox are selected, check the selectall checkbox
// and viceversa
$(".case").click(function(){
if($(".case").length == $(".case:checked").length) {
$("#selectall").attr("checked", "checked");
} else {
$("#selectall").removeAttr("checked");
}
});
});
$(document).ready(function () {
$("input[type=checkbox]").click(updateCount);
updateCount();
function updateCount () {
var count = $("input[type=checkbox].case:checked").length;
$("#count").text(count);
$("#status").toggle(count > 0);
};
});
Might not be what you're looking for, but it's a quick way of doing the toggle thing:
$('a').click(function() {
var $cbs = $('.case');
$cbs.prop('checked', !$cbs.prop('checked'));
return false;
});
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
</head>
<body>
All
<input type="checkbox" class="case" value="1"/>
<input type="checkbox" class="case" value="2"/>
<input type="checkbox" class="case" value="3"/>
<input type="checkbox" class="case" value="4"/>
<input type="checkbox" class="case" value="5"/>
<div id="status">
<p id="count">0</p>
</div>
</body>
<script type="text/javascript">
$("document").ready(function() {
$("#link").click(function(){
$a = $(this);
var action = $a.data('action');
if(action == "all"){
$('.case').attr("checked","true");
$a.text("None").data("action","none");
}
if(action == "none"){
$('.case').removeAttr("checked");
$a.text("All").data("action","all");
}
updatecount();
return false;
})
$(".case").click(function(){
if($(".case").length == $(".case:checked").length){
$("#link").text("None").data("action","none");
}else{
$("#link").text("All").data("action","all");
}
updatecount();
})
})
var updatecount = function(){
$("#count").text($(".case:checked").length);
}
</script>
</html>
This function alerts right totalqt only when I check checkboxes one by one. But doesn't work properly for #check_all: alerts totalqt = 0.
What I did wrong, can anyone explain?
var totalqt=0;
$('#check_all').click( function() {
$('.checkbox').click();
alert(totalqt);
} );
$('.checkbox').click(function(e) {
e.stopPropagation();
if($(this).closest("tr").not('#hdr').hasClass("row_selected")){
$(this).closest("tr").not('#hdr').removeClass("row_selected");
totalqt=totalqt - parseInt($(this).closest("tr").find("#qt").text(), 10);
}
else {
$(this).closest("tr").not('#hdr').addClass("row_selected");
totalqt=totalqt + parseInt($(this).closest("tr").find("#qt").text());
}
HTML looks like that
<tr>
...
<td><input type="checkbox" name="checkbox[]" method="post" value="" class="checkbox"/></td>
...
</tr>
actually when the checkbox is changed manualy it doesn't trigger handler. try something like this.
function doIt(obj){
if($(obj).closest("tr").not('#hdr').hasClass("row_selected")){
$(obj).closest("tr").not('#hdr').removeClass("row_selected");
totalqt=totalqt - parseInt($(obj).closest("tr").find("#qt").text(), 10);
}
else {
$(obj).closest("tr").not('#hdr').addClass("row_selected");
totalqt=totalqt + parseInt($(obj).closest("tr").find("#qt").text());
}
}
then
$('.checkbox').click(function(e) {
e.stopPropagation();
doIt(this);
});
and
$('#check_all').click( function() {
if($(this).prop('checked')){
$('.checkbox').each(function(){
$(this).prop('checked', true);
doIt(this);
alert(totalqt);
});
}else{
$('.checkbox').each(function(){
$(this).prop('checked', false);
doIt(this);
alert(totalqt);
});
}
} );
I have changed my answer to the following, try this:
<div class="checkall">
<input type="checkbox" id="checkall">
</div>
<div id="list">
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
</div>
and jquery:
var checkboxes = $(":checkbox", "#list").change(function() {
var allIsChecked = checkboxes.length === checkboxes.filter(":checked").length;
checkAll[0].checked = allIsChecked;
});
var checkAll = $("#checkall").change(function() {
checkboxes.prop("checked",this.checked);
});