I've tried searching the site, but am really struggling to find what I want... Basically I have some jQuery code that checks the state of three IDs, they are tied to three checkboxes;
$('#submitButton').click(function(){
if($("#cb1,#cb2,#cb3").is(':checked'))
return true;
else
return false;
});
How would I restructure this jQuery statement to make it so that all three checkboxes have to be CHECKED? At the moment, either one can be checked for the action to be performed
I'm betting there is a really simple solution to all of this, but I have been lpooking at it for so long, I just can't see it. Could someone with a fresh pair of eyes and a less addled brain please steer me in the right direction?
You need to use:
$('#submitButton').click(function(){
if ($('#cb1').is(':checked') && $('#cb1').is(':checked') && $('#cb3').is(':checked')) {
return true;
} else {
return false;
}
});
Use
if($("#cb1").is(':checked') && $("#cb2").is(':checked') && $("#cb3").is(':checked'))
$("#cb1,#cb2,#cb3").is(':checked') will return result for the 1st element only
Try:
$('#submitButton').click(function(){
if($("#cb1:checked,#cb2:checked,#cb3:checked").length === 3)
return true;
else
return false;
});
You can use:
if ($('#cb1:checked,#cb2:checked,#cb3:checked').length == 3) {
//all three are checked.do something
}
or
if ($('#cb1:checked,#cb2:checked,#cb3:checked').length == $('#cb1,#cb2,#cb3').length) {
//all three are checked.do something
}
You could try:
$('#submitButton').click(function(){
if($('#cb1')[0].checked && $('#cb2')[0].checked && $('#cb3')[0].checked)return true;
return false;
});
You can just add a class to your checkboxes and use like so:
$('#submitButton').click(function(){
if($(".myCheckbox:checked").length == 3) {
console.log('true');
}
else {
console.log('false');
}
});
Here is the JSFiddle Example:
http://jsfiddle.net/cLH8s/1/
Related
I am trying to trigger the unchecked checkbox, so I tried lot with help of Google, still I can't find a solution,
Attempt 1:
jQuery(".checkbox").attr("checked", false).trigger("click");
When using attempt 1, no changes in my OP,
Attempt 2:
jQuery(".checkbox:checkbox").each(function() {
var code = jQuery(this).val();
var all_list = jQuery("#all_listings").val().split(",");
if (jQuery.inArray(code,all_list) >= 0) {
return false;
}
else {
jQuery(this).trigger("click");
}
});
using attempt 2 returns a error too much recursion
So how to avoid this error? or how to trigger the unchecked checkbox?
Thanks!
Solved:
problem solved with help of #praveen kumar and attempt 2 I changed the if else, now too much recursion solved.
jQuery(".checkbox:checkbox").each(function() {
var code = jQuery(this).val();
var all_list = jQuery("#all_listings").val().split(",");
if(jQuery.inArray(code,all_list) == -1){
jQuery(this).trigger("click");
}
}
You can completely change your Second Attempt to this way:
jQuery(".checkbox:checkbox:not(:checked)").trigger("click");
Hope this helps!
You need to use this way:
jQuery(".checkbox").filter(function () {
return (jQuery(this).prop("checked") == false);
}).trigger("click");
Or you can use:
jQuery(".checkbox").filter(function () {
return (this.checked == false);
}).trigger("click");
Or much simpler:
$('.checkbox:not(:checked)').trigger("click");
This question has been done to death on SO and I'm really, really sorry! I've already taken the bones of the below idea from a couple of SO questions on the same theme.
All said though, I still can't get it to work as expected.
It works OK if NONE are filled in.
It works OK if the END input is filled in and not the others.
It works OK if the MIDDLE input is filled in.
If you fill in ONLY the FIRST input though, it alerts, but submits anyway?
JSFIDDLE
$(document).ready(function (e) {
// completed count submit handler
$("#submit_counts_button").on('click', function () {
window.incomplete = false;
$('input[type=number]').each(function () {
if ($(this).val().length == 0) {
window.incomplete = true;
alert('Some fields are empty');
return false;
} else {
if (window.incomplete === false) {
$("#submit_counts_button").prop('disabled', true);
$("#submit_counts_button").html('Please Wait ...');
//$("#update_form").submit();
}
}
});
});
});
I'm sure it's something totally embarrassingly obvious but after a 16 hour day, I just can't see it. Any help appreciated ...
You need to pull the 'incompletion' check outside of the .each
$(document).ready(function (e) {
// completed count submit handler
$("#submit_counts_button").on('click', function () {
window.incomplete = false;
$('input[type=number]').each(function () {
if ($(this).val().length == 0) {
window.incomplete = true;
alert('Some fields are empty');
return false;
}
});
if (window.incomplete === false) {
$("#submit_counts_button").prop('disabled', true);
$("#submit_counts_button").html('Please Wait ...');
//$("#update_form").submit();
}
});
});
http://jsfiddle.net/6WpeF/6/
try
if(document.getElementById('id of input').value != ""){}
I'm using ASP.NET MVC 4 to develop a web app. I have a page which contains a submit button which should be enabled only if one of my two checkboxes (or both of them) is (are) enabled. The thing is, I'm trying to add an "or" operator in the following script but it does not give me what I want. So, here's my script :
The jQuery sample
And this is the part I'd like to improve :
$(document).ready(function() {
the_terms = $("#the-terms");
the_terms2 = $("#the-terms2");
the_terms.click(function() {
if ($(this).is(":checked")){
$("#submitBtn").removeAttr("disabled");
} else {
$("#submitBtn").attr("disabled", "disabled");
}
});
});
And I can't find a way to tell my document "Okay, if one of these 2 checkboxes (or both of them) is (are) checked, we can press on the button. If not, don't allow it".
Any idea guys?
It can be done with:
Fiddle
$('.checkbox').change(function(){
$('#submitBtn').prop('disabled', !$('.checkbox:checked').length > 0)
});
Note:
This find the checkboxes by class name checkbox so it will work with two checkboxes, whereas your original code is looking at a single checkbox via its ID.
Use the change event not click.
Simply use
$(".checkbox").click(function() {
$("#submitBtn").prop("disabled", !$('.checkbox:checked').length);
});
DEMO
$(document).ready(function() {
the_terms = $("#the-terms");
the_terms2 = $("#the-terms2");
$('.checkbox').change(function(){
$("#submitBtn").prop("disabled", !(the_terms.is(":checked") || the_terms2.is(":checked")));
});
});
// Make a function to be called on onload or on click
function checkTerm() {
jQuery('input[type="submit"]').attr('disabled',!jQuery('input.term:checked').length > 0 ) ;
}
// Call the function on load
$(document).ready(checkTerm) ;
// And call it on check change
jQuery(document).on('change','input.term',checkTerm) ;
Try below modified script , please check if it works as you want.
$(document).ready(function() {
the_terms = $("#the-terms");
the_terms2 = $("#the-terms2");
if(the_terms.is(":checked") || the_terms2.is(":checked"))
{
$("#submitBtn").removeAttr("disabled");
}
else
{
$("#submitBtn").attr("disabled", "disabled");
}
the_terms.click(function() {
if ($(this).is(":checked") || the_terms2.is(":checked")){
$("#submitBtn").removeAttr("disabled");
} else {
$("#submitBtn").attr("disabled", "disabled");
}
});
the_terms2.click(function() {
if ($(this).is(":checked") || the_terms.is(":checked") ){
$("#submitBtn").removeAttr("disabled");
} else {
$("#submitBtn").attr("disabled", "disabled");
}
});
});
I have some function inside click action. I need to stop this function if the last of my html list element will be have some id, so I do this but function does not work... Can you help me?
carousel_controls_buttons.on('click', function(){
var settings_list_last_element_id = settings_menu_element.attr('id') == 'r_00';
if (settings_menu_element.last(id === settings_list_last_element_id)) {
}
else {
renumNext();
}
});
Try changing:
if (settings_menu_element.last(id === settings_list_last_element_id))
to
if (settings_menu_element.last().attr('id') === settings_list_last_element_id)
Edit:
if (settings_menu_element.last().attr('id') === settings_list_last_element_id){
return false;
} else {
renumNext();
}
Or even better:
if (settings_menu_element.last().attr('id') !== settings_list_last_element_id){
renumNext();
}
Your if-statement looks a bit odd. Try something like this instead:
carousel_controls_buttons.on('click', function(){
// Do nothing if last element has a certain id-attribute
if (settings_menu_element.last().attr("id") === 'r_00') {
return false;
}
renumNext();
});
var cbx = document.getElementById('ModelFilter').getElementsByTagName('input');
var ArrCB_l=cbx.length;
while(ArrCB_l--){
var CB=ArrCB[ArrCB_l];
CB.checked()==True;
return 1
}
return 0
Can anyone tell me what is wrong with this? I know the first line is the correct input as I am using it elsewhere for the same checkboxes, however this won't work? I am trying to make sure there is at least one checkbox checked. This function is called with an onsubmit event.
while(ArrCB_1) {
if(cbx[--ArrCB_1].checked) {
return true;
}
}
return false;
.checked() should be just .checked
while(ArrCB_l--){
if (cbx[ArrCB_l].checked) {
return true;
}
}
return false;
your collection is cbx and not ArrCB, and checked is not a method but it's an attribute/property of the element
document.getElementById('ModelFilter').getElementsByTagName('input');
this code returns all inputs(text,button,radio etc)
use
document.getElementById('ModelFilter').getElementsByTagName("input")[ArrCB_l].type == "checkbox"