what is the opposite function if the user unclicks a checkbox?
this is my script if the user clicks the checkbox
<script>
$(document).ready(function() {
$("input[name$='INopt']").click(function() {
$("#OUTsrvOtr").prop('class','text')
});
});
</script>
<input id="INsrv" name="INopt" type="checkbox" value="1" />1<br>
but i want this to run if the user unclicks/unchecks the checkbox
$("#OUTsrvOtr").prop('class','validate[required] text-input text')
Inside click method you can check if if checkbox is checked or unchecked
<script>
$(document).ready(function() {
$("input[name$='INopt']").click(function() {
if(this.checked){
$("#OUTsrvOtr").prop('class','text');
}
else{
$("#OUTsrvOtr").prop('class','validate[required] text-input text');
}
});
});
</script>
It's still click, only you need to check this.checked - if it's true then the box has been checked, otherwise (for unchecking it) it's false.
Related
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/
Why is this code not working on jQuery 1.10.1?
Fiddle here -> http://jsfiddle.net/XgDwU/9/
<input type="radio" id="don" name="billing[use_for_shipping]" value="">Ship to this address</input>
<input type="radio" id="don1" name="billing[use_for_shipping]" value="">Ship to different address</input>
<br/><br/>
<b> <input type="checkbox" id="chkSelect" /> Check/Uncheck me </b>
<br/><br/>
<p></p>
here's my function
$(document).ready(function() {
$('#chkSelect').click(function(){
var isChecked = $('#chkSelect').is(':checked');
if(isChecked){
$("input#don").attr('checked',true);
$('p').html('Checkbox is checked: <b>True</b>');
}else{
$("input#don1").attr('checked',true);
$('p').html('Checkbox is checked: <b>False</b>');
}
});
});
Problems:
Use change event instead of click
Use prop instead of attr
I have use this.checked in place of $('#chkSelect').is(':checked')
Try
$(document).ready(function() {
$('#chkSelect').change(function(){
if(this.checked){
$("input#don").prop('checked',true);
$('p').html('Checkbox is checked: <b>True</b>');
}else{
$("input#don1").prop('checked',true);
$('p').html('Checkbox is checked: <b>False</b>');
}
});
});
DEMO
You should read .prop() vs .attr() a very good explanation is provided
You are trying to add a check attribute to a radio button. If more than one radio button in a set has the checked attribute, the latter will be checked. That's what's happening, more than one radio is being checked.
Since it's a radio button, and the browser handles the switching, just trigger a click on the one that you want:
$('#chkSelect').click(function () {
if (this.checked) {
$("input#don").click();
$('p').html('Checkbox is checked: <b>True</b>');
} else {
$("input#don1").click();
$('p').html('Checkbox is checked: <b>False</b>');
}
});
JSFiddle
I have this jQuery code:
$(document).ready(function(){
$('.checkdisplay').change(function(){
if(this.checked)
$('.todisplay').fadeIn('slow');
else
$('.todisplay').fadeOut('slow');
});
});
This works great only if I check the .checkdisplay radio button: the div appears, but after, if i uncheck .checkdisplay radio button, the div .todisplay doesn't disappear.
Where i'm wrong? :(
EDIT:
demo: http://jsfiddle.net/Mse2L/
You need to test all the radios and only show on the one with the correct class
You could have used ID too
Notice I use .on("click" since change needs a blur in some browsers
Live Demo
$(function(){
$("input[name='roomdoor']").on("click",function(){
if ($(this).hasClass("checkdisplay") && this.checked)
$('.todisplay').fadeIn('slow');
else
$('.todisplay').fadeOut('slow');
});
});
$(document).ready(function () {
$('.radio').change(function () {
if ($(this).hasClass('checkdisplay') && this.checked) $('.todisplay').fadeIn('slow');
else $('.todisplay').fadeOut('slow');
});
});
Demo
The problem is, you can't uncheck a radiobutton.
Problem is your radio button, you should use checkbox like,
Once a radio button having class checkdisplay is checked then it will be checked, how it can be unchecked
<input type='checkbox' class='checkdisplay' />
<div class='todisplay'>test</div>
Demo
Updated, try this like,
$(document).ready(function(){
$('.radio').change(function(){// add onchange on radio class
// check the radio has checkdisplay class or not
if($(this).hasClass('checkdisplay') && this.checked)
$('.todisplay').fadeIn('slow');
else
$('.todisplay').fadeOut('slow');
});
});
Working demo
$('.checkdisplay').click(function() {
if( $(this).is(':checked')) {
$(".todisplay").fadeIn('slow');
} else {
$(".todisplay").fadeOut('slow');
}
});
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.
I am trying to allow a click function if the user has checked a checkbox on the page. Otherwise, I want to add a class to the #additional_foreign button.
I think I am close, but it doesn't seem to be working.
Here is my code:
if($('#foreign_checkbox').attr('checked')) {
$('#additional_foreign').click(function() {
alert('This click function works');
});
} else {
$('#additional_foreign').addClass('btn_disable');
}
When I check the checkbox, it doesn't allow the click function and when I uncheck the checkbox, it also doesn't add the class as it should.
What am I doing wrong?
EDIT:Here is my HTML for clarification.
<input id="foreign_checkbox" type="checkbox" />
<span id="additional_foreign">Click Me</span>
try using $('#foreign_checkbox').is(":checked") - rest of the code looks fine
If this was my code I'd do something like this to make it work:
<input id="foreign_checkbox" type="checkbox" />
<span style='display:none' id="additional_foreign">Click Me</span>
<script type="text/javascript">
$(document).ready(function() {
$("#foreign_checkbox").click(function() {
if($('#foreign_checkbox').is(':checked')) {
$('#additional_foreign').show();
} else {
$('#additional_foreign').hide();
}
});
$('#additional_foreign').click(function() {
alert('This click function works');
});
});
</script>
The problem is that the code doesn't run continually, only when the page loads, when all the boxes are unchecked. You need an action that fires when the box is checked or unchecked, which adds an action or a class to the button:
$('#foreign_checkbox').change(function(){
if (this.checked){
$('#additional_foreign').click(function() {
doSomething();
});
} else {
$('#additional_foreign').addClass('btn_disable');
}
});