The js script below correctly disables the remaining two checkboxes when I select the large checkbox and re-enables when unchecked. However, with this logic, I'd need to code for each specific case.
Instead of manually labeling each checked box with specific id's and coding disabling logic for each case, is there a way to programmatically disable the checked boxes that were not checked?
html
<div class="checkbox" id="sizes">
<label><input id="a" type="checkbox" name="large" value="1">Large</label>
<label><input id="b" type="checkbox" name="medium"value="1">Medium</label>
<label><input id="c" type="checkbox" name="small"value="1">Small</label>
</div>
js
$(document).ready(function(){
$('input[id=a]').change(function(){
if($(this).is(':checked')){
$('input[id=a]').attr('disabled',false);
$('input[id=b]').attr('disabled',true);
$('input[id=c]').attr('disabled',true);
}else{
$('input[id=a]').attr('disabled',false);
$('input[id=b]').attr('disabled',false);
$('input[id=c]').attr('disabled',false);
}
});
})
You can disable all the checkboxes inside the div sizes except the current one as below:
HTML:
<div class="checkbox" id="sizes">
<label><input id="a" type="checkbox" name="large" value="1">Large</label>
<label><input id="b" type="checkbox" name="medium"value="1">Medium</label>
<label><input id="c" type="checkbox" name="small"value="1">Small</label>
</div>
JQUERY:
$(document).ready(function(){
$('#sizes input[type=checkbox]').change(function(){
if($(this).is(':checked')){
$("#sizes").find(':checkbox').not($(this)).attr('disabled',true);
}
else{
$("#sizes").find(':checkbox').attr('disabled',false);
}
});
});
jsfiddle Demo
I think this can be useful
$(document).ready(function(){
$('.checkbox input[type=checkbox]').change(function(){
$('input[id=a]').attr('disabled',true);
$('input[id=b]').attr('disabled',true);
$('input[id=c]').attr('disabled',true);
if($(this).is(':checked')){
$('input[id='+this.id+']').attr('disabled',false);
}
else
{
$('input[id=a]').attr('disabled',false);
$('input[id=b]').attr('disabled',false);
$('input[id=c]').attr('disabled',false);
}
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="checkbox" id="sizes">
<label><input id="a" type="checkbox" name="large" value="1">Large</label>
<label><input id="b" type="checkbox" name="medium"value="1">Medium</label>
<label><input id="c" type="checkbox" name="small"value="1">Small</label>
</div>
HTML
<div class="checkbox" id="sizes">
<label><input id="a" class="checkbox1" type="checkbox" name="large" value="1">Large</label>
<label><input id="b" class="checkbox1" type="checkbox" name="medium"value="1">Medium</label>
<label><input id="c" class="checkbox1" type="checkbox" name="small"value="1">Small</label>
</div>
jQuery
$(document).ready(function(){
$('.checkbox1').change(function(){
if($(this).is(":checked")){
$('.checkbox1').attr('disabled','disabled');
$(this).removeAttr('disabled');
}else{
$('.checkbox1').removeAttr('disabled');;
}
});
})
Related
I have 3 Divs, every div contains 2 inputs, I want to only check checkboxes in the same div with id and unchecked from other divs.
HTML is :
<div class="dashboard">
<div id="fr">
<h3>Fruits</h3>
<label>
<input type="checkbox" name="check1" />Kiwi</label>
<label>
<input type="checkbox" name="check2" />Jackfruit</label>
</div>
<div id="an">
<h3>Animals</h3>
<label>
<input type="checkbox" name="check1" />Tiger</label>
<label>
<input type="checkbox" name="check2" />Sloth</label>
</div>
<div id="veg">
<h3>vegetables</h3>
<label>
<input type="checkbox" name="check1" />Tiger</label>
<label>
<input type="checkbox" name="check2" />Sloth</label>
</div>
</div>
and JQuery is :
$("input:checkbox").on('click', function() {
var $box = $(this);
if ($box.is(":checked")) {
var group = "input:checkbox[name='" + $box.attr("name") + "']";
$(group).prop("checked", false);
$box.prop("checked", true);
} else {
$box.prop("checked", false);
}
});
see live example
If you only want to allow checkboxes to be checked within a single div, you can use jQuery to traverse the DOM using closest(), siblings() and find() to retrieve the external checkboxes before de-selecting them.
Try this:
$("input:checkbox").on('change', e => {
$(e.target).closest('div').siblings().find('input:checkbox').prop('checked', false);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="dashboard">
<div id="fr">
<h3>Fruits</h3>
<label><input type="checkbox" name="check1" />Kiwi</label>
<label><input type="checkbox" name="check2" />Jackfruit</label>
</div>
<div id="an">
<h3>Animals</h3>
<label><input type="checkbox" name="check1" />Tiger</label>
<label><input type="checkbox" name="check2" />Sloth</label>
</div>
<div id="veg">
<h3>vegetables</h3>
<label><input type="checkbox" name="check1" />Tiger</label>
<label><input type="checkbox" name="check2" />Sloth</label>
</div>
</div>
[2]. So far I have written the following code:-
<!DOCTYPE html>
<html lang="en">
<head>
<title>Check Box using jQuery</title>
</head>
<body>
<form id="form">
<input type="checkbox" id="red" name="red" value="Red"/>Red
<input type="checkbox" id="green" name="green" value="Green"/>Green
<input type="checkbox" id="blue" name="blue" value=" Blue"/>Blue
<input type="checkbox" id="black" name="black" value="Black"/>Black<br/>
</form>
<div id="result">0 boxes are checked</div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="chkbox.js"></script>
</body>
</html>
And now the script which I have written in the chkbox.js file is:-
$(document).ready(function(){
var $checkboxes=$('#form td input[type="checkbox"]');
$checkboxes.change(function(){
var ccc=$checkboxes.filter(':checked').length;
$('span').text(ccc);
});
});
I unable to figure out why this code is not working.
First, you do not have td element inside the #form element, 2nd you're printing inside a generic span that doesn't exist. You could do something like this:
<form id="form">
<input type="checkbox" id="red" name="red" value="Red" /> Red
<input type="checkbox" id="green" name="green" value="Green" /> Green
<input type="checkbox" id="blue" name="blue" value=" Blue" /> Blue
<input type="checkbox" id="black" name="black" value="Black" /> Black
</form>
<div id="result">No boxes are checked</div>
And for your javascript like this:
$(document).ready(function() {
var $checkboxes = $('#form input[type="checkbox"]');
$checkboxes.change(function() {
var nr = $('#form input:checked').length;
var message = (nr === 0)?'No':nr;
message += (nr === 1)?" box is checked":" boxes are checked";
$('#result').text(message);
});
});
But, in general, study more about jquery, javascript and html.
You don't have any tds or spans in your code , check this simple way
$('#form input.checkbox').click(function(){
$('#result').text($('#form input.checkbox:checked').length);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="form">
<input type="checkbox" class="checkbox" id="red" name="red" value="Red"/>Red
<input type="checkbox" class="checkbox" id="green" name="green" value="Green"/>Green
<input type="checkbox" class="checkbox" id="blue" name="blue" value=" Blue"/>Blue
<input type="checkbox" class="checkbox" id="black" name="black" value="Black"/>Black<br/>
</form>
<div><strong id="result">0</strong> boxes are checked</div>
I want to disable other checkbox when current checkbox is checked or selected.
Following is my code. I have tried but not work
HTML
<input type="checkbox" name="test" id="test" class="test">One
<input type="checkbox" name="test" id="test" class="test">Two
<input type="checkbox" name="test" id="test" class="test">Three
<input type="checkbox" name="test" id="test" class="test">Four
<input type="checkbox" name="test" id="test" class="test">Five
JQuery Script
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".test").each(function(){
if($(this).is(':checked')){
$(this).prop('checked',true);
$('.test').prop('checked',false);
}
})
})
</script>
You can make use of change event handler and read :checked value of the checkbox clicked. Disable or enable other checkboxes as per :checked value
See below code
NOTE: Always use unique ids for all HTML elements otherwise you will end up with wrong result for the jquery script with id selectors
$(document).ready(function(){
$(".test").on('change', function(){
$('.test').not(this).prop('disabled', $(this).is(':checked'));
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="test" id="test1" class="test">One
<input type="checkbox" name="test" id="test2" class="test">Two
<input type="checkbox" name="test" id="test3" class="test">Three
<input type="checkbox" name="test" id="test4" class="test">Four
<input type="checkbox" name="test" id="test5" class="test">Five
First you need to use click or change event, then you don't need to use $(this).prop('checked',true); and do not use duplicate id
$('.test').click(function() {
let $this = $(this);
if ($this.is(':checked')) {
$('.test').not($this).attr('disabled', true)
} else {
$('.test').attr('disabled', false)
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label><input type="checkbox" name="test" class="test">One</label>
<label><input type="checkbox" name="test" class="test">Two</label>
<label><input type="checkbox" name="test" class="test">Three</label>
<label><input type="checkbox" name="test" class="test">Four</label>
<label><input type="checkbox" name="test" class="test">Five</label>
For make disable you need to use 'disabled', true.
I am breaking my head trying to make it work. I think the solution is not that hard to find but my brain will explode soon...
So I have a bunch of div with the class process
Inside each div, I have a variable amount of checkbox.
I want to to trigger an event when all the checkbox are checked BUT the ones inside the last process class.
This is the base
if(!$(':checkbox').not(':checked').length > 0)
{
//All checkbox are checked
}
So I tried to
if(!$(':checkbox').not('.process:last').not(':checked').length > 0)
But this is not the solution.
From your question, I assume the following HTML and found you the solution:
$(function () {
$(".check").click(function () {
alert($(".process:not(.process:last)").find(":checkbox").length == $(".process:not(.process:last)").find(":checkbox:checked").length ? "Yes" : "No");
});
$(".check_all").click(function () {
$(".process").find(":checkbox").prop("checked", true);
});
$(".check_no_last").click(function () {
$(".process:not(.process:last)").find(":checkbox").prop("checked", true);
});
});
label {display: inline-block; margin: 5px 25px;}
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<div class="process">
<div>Process #1
<label><input type="checkbox" name="" id=""> Checkbox 1</label>
<label><input type="checkbox" name="" id=""> Checkbox 2</label>
<label><input type="checkbox" name="" id=""> Checkbox 3</label>
</div>
</div>
<div class="process">
<div>Process #2
<label><input type="checkbox" name="" id=""> Checkbox 1</label>
<label><input type="checkbox" name="" id=""> Checkbox 2</label>
<label><input type="checkbox" name="" id=""> Checkbox 3</label>
</div>
</div>
<div class="process">
<div>Process #3
<label><input type="checkbox" name="" id=""> Checkbox 1</label>
<label><input type="checkbox" name="" id=""> Checkbox 2</label>
<label><input type="checkbox" name="" id=""> Checkbox 3</label>
</div>
</div>
<div class="process">
<div>Process #4
<label><input type="checkbox" name="" id=""> Checkbox 1</label>
<label><input type="checkbox" name="" id=""> Checkbox 2</label>
<label><input type="checkbox" name="" id=""> Checkbox 3</label>
</div>
</div>
<div class="process">
<div>Process #5
<label><input type="checkbox" name="" id=""> Checkbox 1</label>
<label><input type="checkbox" name="" id=""> Checkbox 2</label>
<label><input type="checkbox" name="" id=""> Checkbox 3</label>
</div>
</div>
<input type="submit" value="Check All" class="check_all" />
<input type="submit" value="Check But Last" class="check_no_last" />
<input type="submit" value="Check" class="check" />
You may try something like this:
$('div.process:last input[type="checkbox"]').on('change', function() {
var countOfAllCheckboxes = $(this).parent().find(':checkbox');
var countOfAllCheckedCheckboxes = countOfAllCheckboxes.filter(':checked');
if(countOfAllCheckedCheckboxes.length == countOfAllCheckboxes.length) {
alert('All checkboxes are checked in last div.process!');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="process">
<input type="checkbox" name="chk" /> Checkbox1 in First Div
</div>
<div class="process">
<input type="checkbox" name="chk"/> Checkbox1 in Last Div.process
<input type="checkbox" name="chk"/> Checkbox2 in Last Div.process
<div>
I have the following HTML structure:
<div>
<span class="city-search-text">Choose City</span>
</div>
<div class="multiselect">
<label><input type="checkbox" name="option[]" value="1" />1</label>
<label><input type="checkbox" name="option[]" value="2" />2</label>
<label><input type="checkbox" name="option[]" value="3" />3</label>
<label><input type="checkbox" name="option[]" value="4" />4</label>
</div>
If any checkbox is selected, span with class city-search-text should be replace with:
<a class="cancel-all" href="#">Cancel all</a>
When i uncheck all check boxes, link with class cancel-all should be replaced with span with class city-search-text.
I have this jquery code. It replaces the span when i check some box, but doesn't replace it back when i uncheck all checkboxes.
var Checkboxes = $('.multiselect').find(':checkbox');
var CitySearch = '<span class="city-search-text">Choose City</span>';
var InactiveText = $('.city-search-text');
var CancellAll = '<a class="cancel-all" href="#">Cancell All</a>';
var ActiveText = $('.cancel-all');
Checkboxes.click(function(){
if(Checkboxes.is(':checked')){
InactiveText.replaceWith(CancellAll);
}
else{
ActiveText.replaceWith(CitySearch);
}
});
jQuery is not live on the DOM all the time. You'll have to explicitly look for the element each time you want to replace. So do not use the variables ActiveText & InactiveText, instead use $(".cancel-all").replaceWith(CitySearch) and $(".city-search-text").replaceWith(CancelAll)
You shouldn't replace your content all the time. Just show and hide your elements when needed:
$(function(){
var Checkboxes = $('.multiselect input[type=checkbox]');
var CitySearch = $('.city-search-text');
var CancelAll = $('.cancel-all');
CitySearch.show();
CancelAll.hide();
Checkboxes.click(function(){
if(Checkboxes.is(':checked')){
CitySearch.hide();
CancelAll.show();
}
else{
CitySearch.show();
CancelAll.hide();
}
});
});
Fiddle
Try this:
JavaScript:
var checkbox = $('.multiselect').find(':checkbox');
var choose = $('.city-search-text');
var cancel = $('.cancel-all');
checkbox.click(function(){
if(checkbox.is(':checked')){
cancel.show();
choose.hide();
}
else {
cancel.hide();
choose.show();
}
});
HTML:
<div>
<span class="city-search-text">Choose City</span>
<a class="cancel-all" href="#">Cancel all</a>
</div>
<div class="multiselect">
<label><input type="checkbox" name="option[]" value="1" />1</label>
<label><input type="checkbox" name="option[]" value="2" />2</label>
<label><input type="checkbox" name="option[]" value="3" />3</label>
<label><input type="checkbox" name="option[]" value="4" />4</label>
</div>
Fiddle: http://jsfiddle.net/aSa3T/
Instead of replacing the html. You can show and hide the options you want.
html
<div>
<span class="city-search-text">Choose City</span>
<a style="display:none" class="cancel-all" href="#">Cancell All</a>
</div>
<div class="multiselect">
<label><input type="checkbox" name="option[]" value="1" />1</label>
<label><input type="checkbox" name="option[]" value="2" />2</label>
<label><input type="checkbox" name="option[]" value="3" />3</label>
<label><input type="checkbox" name="option[]" value="4" />4</label>
</div>
js
$(".multiselect :checkbox").click(function()
{
if($(".multiselect :checked").length > 0)
{
$(".city-search-text").hide();
$(".cancel-all").show();
}
else
{
$(".city-search-text").show();
$(".cancel-all").hide();
}
});