How to disable all checkbox with use of foreach in jQuery - javascript

I want to disable all checkbox when click all 'select all'.
How is this possible using jQuery?
JavaScript:
Here categories[] is name of checkbox which is in foreach loop
function checkAll(source) {
checkboxes = document.getElementsByName('categories[]');
for(var i=0, n=checkboxes.length;i<n;i++) {
//checkboxes[i].checked = source.checked;
checkboxes[i].disabled = source.disabled;
}
}

function uncheckAll() {
$('input:checkbox').removeAttr('checked');
}
function disableAll() {
$('input:checkbox').attr('disabled','true');
}
<input type="checkbox" checked>A<br/>
<input type="checkbox" checked>B<br/>
<input type="checkbox">C<br/>
<input type="checkbox" checked>D<br/>
<input type="checkbox">E<br/>
<button onclick="uncheckAll()">Uncheck all</button>
<button onclick="disableAll()">Disable all</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Just use prop('disabled', true)
$('#mainChk').on('click', function(){
var categories = $('.categories');
categories.prop('disabled', !categories.prop('disabled'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="mainChk" type="checkbox" > Main
<input type="checkbox" class="categories"> First
<input type="checkbox" class="categories"> Second
<input type="checkbox" class="categories"> Third

Give all your checkbox a class (ex: class='ck').
Then :
$('.ck').each(function(){
$(this).prop('disabled', true);
})

This will work for you.
<input type="checkbox" checked>A<br/>
<input type="checkbox" checked>B<br/>
<input type="checkbox">C<br/>
<input type="checkbox" checked>D<br/>
<input type="checkbox">E<br/>
<button class="disableAll">Disable all</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".disableAll").click(function(){
$('input[type=checkbox]').each(function(){
$(this).prop('disabled', true);
})
});
});

you can enable disable checkboxes with jquery like this.
$('#checkAll:checkbox').change(function () {
if($(this).attr("checked")) $('input:checkbox').attr('checked','checked');
else $('input:checkbox').removeAttr('checked');
});
Have a look at this demo.

Related

How to get checkbox value checked and show to input element using Javascript or Jquery?

but the value is only displayed when I click on the checkbox and it does not display the pre-selected values, I want it to show the selected results even if I do not click the checkbox, please correct this code Help me or give me some example code so I can add, thank you!
<script type="text/javascript">
function thayTheLoai() {
var huunhan_theloai = [];
$.each($("input[type='checkbox']:checked"), function() {
huunhan_theloai.push($(this).val());
});
document.getElementById("input").value = huunhan_theloai.join(", ");
}
</script>
<label for="default" onclick="thayTheLoai();" class="btn btn-default">
<input type="checkbox" value="1" id="theloai1" class="badgebox" name="theloai[]" ></input>
</label>
<input id="input" type="text"></input>
<script>
$('#theloai1').prop('checked', true);
</script>
This is demo : https://anifast.com/includes/test.php, I want to not need to click the checkbox and still display the checked results
Use this code and don't forget to use jquery library.
$(document).ready(function(){
$('#theloai1').prop('checked', true);
var huunhan_theloai = [];
$.each($("input[type='checkbox']:checked"), function() {
huunhan_theloai.push($(this).val());
});
document.getElementById("input").value = huunhan_theloai.join(", ");
})
function thayTheLoai() {
if ($('input[name="theloai[]"]:checked').length > 0) {
$("#input").val(1);
}else{
$("#input").val(0);
}
}
You have 2 ways of doing it:
you update the input field from your PHP and MySQL to have the checked="checked" on the selected input fields and the run the function on load:
JS
function thayTheLoai() {
var huunhan_theloai = [];
$.each($("input[type='checkbox']:checked"), function() {
huunhan_theloai.push($(this).val());
});
$('#input').val( huunhan_theloai.join(", ") );
}
$(document).ready(function(){
thayTheLoai();
});
HTML
<label for="theloai1" onclick="thayTheLoai();" class="btn btn-default">
<input type="checkbox" value="1" id="theloai1" class="badgebox" name="theloai[]" />
</label>
<label for="theloai2" onclick="thayTheLoai();" class="btn btn-default">
<input type="checkbox" value="2" id="theloai2" class="badgebox" name="theloai[]" checked="checked" />
</label>
<input id="input" type="text"/>
if you want to update the input field using the $('#theloai1').prop('checked', true);, you should change it so that it also triggers the onchanged event on the input field like this:
$('#theloai1').prop('checked', true).trigger('change');
NOTES
this code is not tested, but it should work
make sure you write valid HTML otherwise you might get unexpected results (I fixed your HTML as well)
<label for="default" class="btn btn-default">
<input type="checkbox" value="1" id="theloai1" class="badgebox" name="theloai[]" ></input>
<input type="checkbox" value="2" id="theloai2" class="badgebox" name="theloai[]" ></input>
<input type="checkbox" value="3" id="theloai3" class="badgebox" name="theloai[]" ></input>
<input type="checkbox" value="4" id="theloai4" class="badgebox" name="theloai[]" ></input>
</label>
<input id="input" type="text"></input>
$(document).ready(function(){
$('#theloai1').prop('checked', true);
var huunhan_theloai = [];
$.each($("input[type='checkbox']:checked"), function() {
huunhan_theloai.push($(this).val());
});
document.getElementById("input").value = huunhan_theloai.join(", ");
})
$("input[type='checkbox']").on("change", function(){
checked_id = $(this).attr("id");
if ($(this).prop("checked") == true) {
$("input[type='checkbox']").each(function(){
if ($(this).attr("id") != checked_id) {
$(this).prop("checked", false);
}
})
$("#input").val($(this).val());
}else{
$("#input").val('some default value');
}
})

Enable click event when another checkbox is cheched

I need a jQuery function that does the following thing: for example, when checkbox1 is checked, when I click on some other elements (with an id starting with element-) I could print the id of these elements in the console as follows:
$('#checkbox1').click(function() {
if ($(this).is(':checked')) {
$(document).on('click','[id^=element-]', function(e) {
console.log(this.id);
});
} else {}
});
I tested this example and it's not working. I have not idea when I'm wrong.
The simplest way to do this would be to invert your logic. That is to say, place the click handler on the required elements and within that check the state of the checkbox. Try this:
$(document).on('click', '[id^="element-"]', function(e) {
if ($('#checkbox1').is(':checked'))
console.log(this.id);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>
<input type="checkbox" id="checkbox1" />
Check me!
</label>
<div>
<button id="element-foo">Foo</button>
<button id="element-bar">Bar</button>
</div>
I tested it out, and this will work for you
$("input[id^=d]").on("click", function() {
var id = $(this).prop("id");
if ($("#c1").is(":checked")) {
console.log(id);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Dogs <input id="c1" type="checkbox" />
Cats <input id="d1" type="checkbox" />
Zebras <input id="d2" type="checkbox" />
Rhinos <input id="e1" type="checkbox" />

Enable Button When Any Checkbox Values Change

I have a page with multiple checkboxes in varying states (checked or unchecked) . I'm trying to enable a button as soon as any of the checkbox values change state.
Here is my code so far but it doesn't seem to work properly yet:
var checkboxes = $("input[type='checkbox']");
checkboxes.change(function(){
$('#saveChanges').prop('enabled', true);
});
<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script>
$(document).ready(function () {
$("input[type='checkbox']").change(function () {
$('#saveChanges').prop('disabled', false);
});
});
</script>
</head>
<body>
<input type="checkbox" value="1" />
<input type="checkbox" value="1" />
<input type="checkbox" value="1" />
<button id="saveChanges" disabled>Save</button>
</body>
</html>
Try, where submit button would be..
<input type="submit" value="Do thing" disabled>
var checkboxes = $("input[type='checkbox']"),
submitButt = $("input[type='submit']");
checkboxes.click(function() {
submitButt.attr("disabled", !checkboxes.is(":checked"));
});
Try,
<input class="myCheckBox" type="checkbox" value="true">
<input class="myCheckBox" type="checkbox" value="true">
<button type="submit" id="confirmButton">BUTTON</button>
var checkboxes = $('.myCheckBox');
checkboxes.on('change', function ()
{
$('#confirmButton').prop('disabled', !checkboxes.filter(':checked').length);
}).trigger('change');

How to work with two checkbox using jQuery

I want to show a div which contains company details inputs and if a user check the input YES then show div and if a user check the input NO then hide div.
I have written some first code for the input checkbox YES and it working fine but if input NO is check the div is still there of which i want to hide it and uncheck the YES input checkbox.
somebody help me modify the script.
JavaScript:
$(document).ready(function (e) {
$("#yes").click(function () {
if($(this).is(":checked")) {
$("#companydetials").show();
} else {
$("#companydetials").hide();
}
})
});
HTML:
<p>Do you have a company?
<input name="comorno" type="checkbox" id="yes" form="signupform"> Yes
<input type="checkbox" name="comorno" id="no">No</p>
You need radio button for what you want. Try the following code.
$(document).ready(function (e) {
$("input[name=comorno]").change(function () {
if($(this).is("#yes")) {
$("#companydetials").show();
} else {
$("#companydetials").hide();
}
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Do you have a company?
<input name="comorno" type="radio" id="yes" value="" form="signupform" checked> Yes
<input type="radio" name="comorno" id="no">No</p>
<div id="companydetials">
Company Details Here
</div>
Or if using checkbox is a necessity for you in this case you can do it this way -
$(document).ready(function (e) {
$("input[name^=comorno]").change(function () {
if($(this).is("#yes")) {
$("#companydetials").show();
$("#no").prop("checked", false);
} else {
$("#companydetials").hide();
$("#yes").prop("checked", false);
}
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Do you have a company?
<input name="comorno[]" type="checkbox" id="yes" value="" form="signupform" checked> Yes
<input name="comorno[]" type="checkbox" id="no">No</p>
<div id="companydetials">
Company Details Here
</div>
Check this jsfiddle example - http://jsfiddle.net/ko64a3a8/
<input name="check_status" type="checkbox" class="mycheckbox" value="yes"/>
<div id="myDiv">text</div>
<script>
$(function(){
$('.mycheckbox').change(function(){
if($(this).is(':checked')){
$('#myDiv').show();
}else{
$('#myDiv').hide();
}
})
});
</script>
Or if you want 'yes' and 'no' options
<label for="statYes">Yes</label>
<input name="check_status" id="statYes" type="checkbox" class="mycheckbox" value="yes"/>
<label for="statNo">No</label>
<input name="check_status" id="statNo" type="checkbox" class="mycheckbox" value="no"/>
<div id="myDiv">text</div>
<script>
$(function(){
$('#myDiv').hide();
$('.mycheckbox').change(function(){
if($(this).is(':checked')){
if($(this).val() == 'yes') {
$('#statNo').removeAttr('checked');
$('#myDiv').show();
}else{
$('#statYes').removeAttr('checked');
$('#myDiv').hide();
}
}
})
});
</script>
UPD: Here is the example http://jsfiddle.net/3L3b580h/
When you click 'yes' it shows the div and unchecks the 'no' (if it checked) and backwards
$(document).ready(function (e) {
$('input[name="comorno"]').each(function()
{
$(this).change(function()
{
$('input[name="comorno"]').prop('checked',false);
$(this).prop('checked',true);
if($('#yes').is(':checked')) {
$('#companydetails').show()
} else {
$('#companydetails').hide()
}
});
});
});
Checkout this topic: make checkbox behave like radio buttons with javascript
Fiddle: http://jsfiddle.net/ojensc2y/

Checkbox check all by name

Here is my fiddle which will select checkbox in the page.
But i wanted to check the group of checkbox with common class name.
Here is the Jsfiddle I have for that.
How can i achieve this ?
Here's the Script i have so far
$(document).ready(function(){
$('.check:button').toggle(function(){
$('input:checkbox').attr('checked','checked');
$(this).val('uncheck all')
},function(){
$('input:checkbox').removeAttr('checked');
$(this).val('check all');
})
})
You should give same class(say checkall) to checkboxes that check/uncheck all elements in group and have a change handler that only target the checkboxes from sibling fieldset of closest p element:
$(".checkall").change(function () {
$(this).closest('p').next().find(':checkbox').prop('checked', $(this).prop("checked"));
});
Working Demo
$("#checkAll1").change(function () {
$(".1").prop('checked', $(this).prop("checked"));
});
$("#checkAll2").change(function () {
$(".2").prop('checked', $(this).prop("checked"));
});
You should use jQuery.data()
$(".js-check-group").change(function () {
var elem = $(this);
$('.' + elem.data('group')).prop('checked', elem.prop("checked"));
});
Demo: http://jsfiddle.net/ScnQT/211/
I would to it like this:
<input type="checkbox" id="checkAll2" class="checkAll"/>
$(".checkAll").change(function () {
var myInputs = $(this).closest("form").find("fieldset input:checkbox");
myInputs.each(function(){
$(this).prop('checked', !$(this).prop("checked"));
});
});
And here the fiddle:
http://jsfiddle.net/ScnQT/208/
You just replace input by your class name.
$("#checkAll1").change(function () {
$(".1:checkbox").prop('checked', $(this).prop("checked"));
});
$("#checkAll2").change(function () {
$(".2:checkbox").prop('checked', $(this).prop("checked"));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="#">
<p><label><input type="checkbox" id="checkAll1"/> Check all</label></p>
<fieldset>
<legend>Loads of checkboxes</legend>
<p><label><input type="checkbox" class="1" /> Option 1</label></p>
<p><label><input type="checkbox" class="1" /> Option 2</label></p>
<p><label><input type="checkbox" class="1" /> Option 3</label></p>
</fieldset>
</form>
<form action="#">
<p><label><input type="checkbox" id="checkAll2"/> Check all</label></p>
<fieldset>
<legend>Loads of checkboxes</legend>
<p><label><input type="checkbox" class="2" /> Option 1</label></p>
<p><label><input type="checkbox" class="2" /> Option 2</label></p>
<p><label><input type="checkbox" class="2" /> Option 3</label></p>
</fieldset>
</form>
LINK : http://jsfiddle.net/4zpu4m0w/1/
Regards.

Categories