We Keep Coding

jquery code validator event

The problem is that code write for checkbox click event.
so if the user first click on checkbox then edit the field validator is not work.
i don't want write similar code for submit click event because i want disable submit button when the form filed information not valid
here is a jquery:
$(".jbcheckboxSignUp").click(function () {
$(".jbcheckboxSignUp").toggleClass("select");
var $checkbox = $("#jbCheckBoxSignUp");
$checkbox.attr('checked', !$checkbox.attr('checked'));
if ($("button.SignUpButton").attr('disabled') && $('#SignUpForm').validator() && $("#signUpEmail").val()!="" ) {
$("button.SignUpButton").removeAttr('disabled');
} else {
$("button.SignUpButton").attr('disabled','disabled');
}
});

check box value Showing error

I have checkbox and disabled textbox. When checkbox is true, text box will be active and focused. when false, it become disabled. i added blur event on the text box and check box change event for certain operations.
<input type="checkbox" id="chkTest1" name="chkTest1" value="Bike"> check</br>
<input type="text" id="txtTest1" disabled />
Script
$('#chkTest1').change(function() {
var flagCheck = $(this).prop('checked');
$('#txtTest1').prop('disabled', !flagCheck).val('').off();
if(flagCheck)
{
$('#txtTest1').focus();
}
$('#txtTest1').blur(function () {
console.log($("#chkTest1").prop('checked'));
});
});
My problem is
when checkbox makes false, text box disabled and lost focus. so checkbox change event and blur event will be fired. But in blur event, check box value still be true instead of false. How to resolve this.
Here the Code Fiddle
Thanks in advance.

When the checkbox is clicked directly after filling the field then you need to wait since the blur triggers before the click that changes the checkbox.
Also be aware that the .off() will remove the blur handler from the text field after clicking!
$(function() {
$('#chkTest1').on("click", function() {
var flagCheck = this.checked;
$('#txtTest1').prop('disabled', !flagCheck).val('');
if (flagCheck) {
$('#txtTest1').focus();
}
});
$("#txtTest1").on("blur", function() {
setTimeout(function() { console.log("test check",$("#chkTest1").is(':checked')); },500);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="checkbox" id="chkTest1" name="chkTest1" value="Bike">check</br>
<input type="text" id="txtTest1" disabled />

#Glitson George:
i explaned why i am removing
the blur event in the below fiddle. Please check jsfiddle.net/ka1mkfrv/6 .
once blur function stored in memory,
2nd time onwards blur function will excute first then change event will excute
Please check the console for this.
http://jsfiddle.net/ka1mkfrv/6/

I guess you want to keep the text box content when disabling the checkbox:
$('#chkTest1').change(function() {
var flagCheck = $(this).prop('checked');
if(flagCheck)
{
$('#txtTest1').prop('disabled', !flagCheck).val('').off();
$('#txtTest1').focus();
} else {
$('#txtTest1').prop('disabled', !flagCheck);
}
$('#txtTest1').blur(function () {
console.log($("#chkTest1").prop('checked'));
});
});
http://jsfiddle.net/ka1mkfrv/4/

Your below code will only be executed when textbox is not disabled
$('#txtTest1').blur(function () {
console.log($("#chkTest1").prop('checked'));
});
So when your textbox will be enabled at the same time your checkbox will also be enabled.
When your text-box will be disabled at the same time checkbox your checkbox will also be disabled but your above will not be not execute.
That's why you cannot print the false value of checkbox

below is the working fiddle
$(document).on("change",'#chkTest1',function() {
var flagCheck = $(this).is(':checked')
if(flagCheck){
$('#txtTest1').removeAttr('disabled').val('').off();
$('#txtTest1').focus();
}
else
{
$('#txtTest1').prop('disabled', !flagCheck).val('');
console.log($("#chkTest1").is(':checked'));
}
});
http://jsfiddle.net/ka1mkfrv/5/

How do I trigger a custom javascript event when a checkbox is selected via a jQuery script that selects all checkboxes on a page?

I'm currently working on a photography store website. Customers will be allowed to view photosets ranging from 100-500 images on a page. I want those customers to be able to click a "Select All" button (or other element) that checks all the checkboxes on the page. I am currently using jQuery to successfully accomplish this "Select All" feature after researching here on Stack Overflow.
Currently, the code that I am working with puts a checkbox on each image in the photoset. If the user clicks the checkbox, it triggers a custom event. However, I want the checkbox state of being checked (or the change from being unchecked to checked) to trigger the event, not the click. If the click triggers the event, the Select All feature I have using jQuery fails to work, since jQuery isn't "clicking" each of the checkboxes on the page, only changing the checkbox to selected. This means that the custom event doesn't load.
The code that currently works to trigger the event I need by clicking (which I do not want to do) the checkbox is:
$('.select-product').on('click', this.QuickOrder.loadProduct);
The code I am trying to develop isn't working, but it goes something like:
$('.select-product').change(function(){
var isChecked = $(this).is(':checked');
if(isChecked) {
this.QuickOrder.loadProduct;
}
});
I've used the .change() function after researching and finding that the change function registers the change in the condition of the checkbox. When this condition changes to true, I want QuickOrder.loadProduct to trigger. After that, everything should work.
Here is my jQuery "Select All" script for reference:
$(document).ready(function() {
$("#select_all").change(function(){
if(this.checked){
$(".select-product").each(function(){
this.checked=true;
})
}else{
$(".select-product").each(function(){
this.checked=false;
})
}
});
$(".select-product").click(function () {
if (!$(this).is(":checked")){
$("#select_all").prop("checked", false);
}else{
var flag = 0;
$(".select-product").each(function(){
if(!this.checked)
flag=1;
})
if(flag == 0){ $("#select_all").prop("checked", true);}
}
});
});
Any ideas on how to make this happen? Thank you!

As explained in Why isn't my checkbox change event triggered?:
The change event does not fire when you programmatically change the value of a check box.
Below I give two solutions (the first is from the aforementioned link):
1: Explicitly trigger the change event after changing the checkbox setting.
this.checked = true;
$(this).trigger('change');
2: Just programmatically delegate to the click event.
$(this).trigger('click');
Demo:
window.loadProduct = function(id) { alert('loadProduct() called on #'+id+'.'); };
// propagate select-all checkbox changes to all individual checkboxes
$("#select_all").change(function() {
if (this.checked) {
$(".select-product").each(function() {
// original code
//this.checked = true;
// solution #1: explicitly force a change event
this.checked = true;
$(this).trigger('change');
// solution #2: trigger click
//$(this).trigger('click');
});
} else {
$(".select-product").each(function() {
this.checked = false;
});
} // end if
});
// propagate individual checkbox changes back to the select-all checkbox
$(".select-product").click(function() {
if (!$(this).is(":checked")) {
$("#select_all").prop("checked", false );
} else {
var flag = 0;
$(".select-product").each(function() {
if (!this.checked)
flag = 1;
});
if (flag == 0) {
$("#select_all").prop("checked", true );
} // end if
} // end if
});
// call loadProduct() for any change of an individual checkbox
$('.select-product').change(function() {
var isChecked = $(this).is(':checked');
if (isChecked) {
loadProduct(this.id);
} // end if
});
.select_container {
margin-bottom:8px;
}
.img_container {
display:flex;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="select_container">
<input id="select_all" type="checkbox"/>
</div>
<div class="img_container">
<div>
<div><img src="https://www.gravatar.com/avatar/4fa45261dec56004145c653832504920?s=128&d=identicon&r=PG&f=1"/></div>
<input id="check1" class="select-product" type="checkbox"/>
</div>
<div>
<div><img src="https://www.gravatar.com/avatar/fc03f6eed7d4d5e3233c5dde9f48480d?s=128&d=identicon&r=PG&f=1"/></div>
<input id="check2" class="select-product" type="checkbox"/>
</div>
<div>
<div><img src="https://www.gravatar.com/avatar/fd882c2b5e410936a4a607b2e87465d9?s=128&d=identicon&r=PG&f=1"/></div>
<input id="check3" class="select-product" type="checkbox"/>
</div>
</div>

Toggle Show and Enable Textfiled When Certain Radio Button is Selected

I would like to be able to have an input field (initially hidden and disabled) to be shown and enabled every time the "Other" radio button is selected, and ofcoure to be hidden and disabled when a different radio button is selected . I have gotten this script to show and hide the textfield appropriately, but Id like to know how I can get enabling and disabling to happen with it
$('input[name="x_description"]').bind('change',function(){
var showOrHide = ($(this).val() == "Other") ? true : false;
$('#other_program_text').toggle(showOrHide);
});
I know that this is how to show the field and enable the textfield, but cant figure out how to put it all together,
$(this).show().prop('disabled', false);
Thanks in advance,
Dan

$('input[name="x_description"]').bind('change',function(){
if ( showOrHide == true ) {
$('#other_program_text').show().prop('disabled',false);
} else if ( showOrHide == false ) {
$('#other_program_text').hide().prop('disabled',true);
}
});

You want to use the $(this).attr() function to set properties on an HTML element. With one parameter it'll read the passed param, with two it'll set it.
Like $(this).attr("enabled", true)

You can use "click" method
$('input[name="x_description"]').click(function() {
if($('#radio_button').is(':checked')) {
alert("it's checked"); //do your stuff
}
});
If your content are dynamically generated then use "live" method
$('input[name="x_description"]').live('click',function() {
if($('#radio_button').is(':checked')) {
alert("it's checked"); //do your stuff
}
});

Enable button when checkboxes selected

I have multiple checkboxes and a submit button that is initially disabled. When checking a box the button is enabled and when unchecking, the button is disabled again.
If have multiple checkboxes selected but uncheck one, the button becomes disabled even though I have selected other checkboxes. How can I fix this issue?
<script type="text/javascript">
$(function() {
$(".checkbox").click(function() {
$(".delete").attr("disabled", !this.checked);
});
});
</script>
HTML
<input type="checkbox" name="msg[]" value="32" class="checkbox" />
<input type="checkbox" name="msg[]" value="44" class="checkbox" />
<input type="checkbox" name="msg[]" value="26" class="checkbox" />
<button type="submit" class="delete" disabled="disabled">Delete</button>

$(function() {
$(".checkbox").click(function(){
$('.delete').prop('disabled',$('input.checkbox:checked').length == 0);
});
});
Demo: http://jsfiddle.net/AlienWebguy/3U364/

Implement a counter to track how many are checked, rather than just disabling the button. Add 1 every time a box is checked, and subtract 1 every time a box is unchecked. Once the counter hits 0, disable the button. When it changes to 1, enable the button (if it changes to any higher number it will have already been enabled, so you don't need to enable it every time). Sample:
<script type="text/javascript">
var boxcounter;
$(function() {
boxcounter = 0;
$(".checkbox").click(function() {
if(this.checked) {
counter++;
if(counter == 1){
$(".delete").attr("disabled", "");
}
} else {
counter--;
if(counter == 0){
$(".delete").attr("disabled", "disabled");
}
}
}
}
</script>

Try this where I am basically checking if all the checkboxes are not checked then disable the button.
$(function() {
$(".checkbox").click(function() {
$(".delete").attr("disabled", !$(".checkbox:checked").length);
});
});

You need to check the state of the other boxes each time 1 box is toggled.

You can build an array of every checkbox.
Then, loop through testing for checked, and exit the loop on checked (this is what you care about).
If you reach the end of the loop and checked for all was false, then disable the button.
This will prevent one uncheck from disabling the button.
You're currently only checking "this" checkbox rather than all.

This code is Actually works without any error.
var boxcounter;
$(function() {
let boxcounter = 0;
$(".cgv-checkbox").click(function() {
if(this.checked) {
console.log('checked');
boxcounter++;
if(boxcounter == 3){
$("#register_form_Register").removeAttr("disabled");
}
} else {
boxcounter--;
if(boxcounter < 3){
$("#register_form_Register").attr("disabled", "disabled");
}
}
});
});
This will work with multiple checkboxes as well.