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.
Related
I have a button and I want to do the following
Disable this button by clicking on the checkbox that refers to it
Keep it disabled even after refreshing the page
Do the same, but instead. The button is disabled and now I would like to enable it again by clicking on the checkbox that references it keeping it that way after refreshing the page
I found two references that do exactly what I need, but I don't know how to put the two solutions together. This and this
HTML code
<div id="billing">
<input type="checkbox" id="billing-checkbox" checked>
<input type="button" value="Hello Javascript!">
</div>
Javascript code
document.addEventListener('DOMContentLoaded', function () {
document.getElementById('billing-checkbox').onchange = toggleBilling;
}, false);
function toggleBilling() {
var billingItems = document.querySelectorAll('#billing input[type="button"]');
for (var i = 0; i < billingItems.length; i++) {
billingItems[i].disabled = !billingItems[i].disabled;
}
}
$(function(){
var test = localStorage.input === 'true'? true: false;
$('input').prop('checked', test || false);
});
$('input').on('change', function() {
localStorage.input = $(this).is(':checked');
console.log($(this).is(':checked'));
});
Thank you so much!
This will give a script error in the snippet, probably because it is a sandbox and doesn't allow for localStorage. But this is tested and works. See comments in the code for explanations. You can set the checkbox on or off and when you refresh the page, it will 'remember' it's state
$(document).ready(function() {
// first thing is to set the checkbox based on the localStorage key that we may have set in the past
$('#billing-checkbox').prop('checked', localStorage.getItem('buttonDisabled') !== "disabled");
// then we run our toggle billing
toggleBilling()
// we set up our change handler.
$('#billing-checkbox').on('change', toggleBilling);
});
function toggleBilling(e) {
// we set the disabled based on the check button status
$('#billing input[type="button"]').attr('disabled', !$('#billing-checkbox').prop('checked'))
// we set the localStorage based on the button disabled
localStorage.setItem('buttonDisabled', $('#billing input[type="button"]').attr('disabled'));
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="billing">
<input type="checkbox" id="billing-checkbox" checked>
<input type="button" value="Hello Javascript!">
</div>
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>
I want my form to meet a set of criterias before the submit button gets enabled, my form is in this order:
Text field, value has to be over 150
Set of radio selects, 1 has to be selected
TOS box, has to be checked
So far I have this:
if ((parseInt($('#amount').val(), 10) > 149) && $('input:radio[name="radioset1"]').is(':checked') && ($('input.checkbox_check').is(':checked')))
{
// Enable Button here
}
Do I have to add this to everything I'm checking, for example keyup on the textfield, change on the select and checkbox and set true in variables that those fields are "OK" or how do I do it ?
You need to create a custom validate function, which you have to run onchange of your text field, and on click of your radio and checkbox click event.
Following psudo code might help you.
var textFieldValidationPassed = false;
function validateFormFields() {
//First checks if text field length is not less then 150.
// then check if one of the radio button is selected.
// then check for TOS box checked state;
if (textFieldValidationPassed && $('input:radio[name="radioset1"]').is(':checked') && ($('input.checkbox_check').is(':checked')))
// enable submit button;
}
}
$('input:radio[name="radioset1"]', 'input.checkbox_check').click(function() {
validateFormFields();
})
$('#amount').keyup(function(){
if($(this).val().length > 149) {
textFieldValidationPassed =true;
validateFormFields();
}
})
it is a workaround but will work, make submit button initially...
$(":submit").on('focus',Validate);
function Validate(){
if ((parseInt($('#amount').val(), 10) > 149) && $('input:radio[name="radioset1"]').is(':checked') && ($('input.checkbox_check').is(':checked')))
{
// Enable Button here
}
else
{
//Disable button
}
}
You can just add click, change events at once like this
$("input").on("change, click", function(){
});
Write your logic within this.
Also you've checkbox validation wrong. Check box will be clicked.
$('input.checkbox_check').prop('checked')
Here is the complete code
$(function(){
$("input").on("change, click", function(){
if ((parseInt($('#UserName').val(), 10) > 149) && $('input:radio[name="gender"]').is(':checked') && $("#remember").prop('checked'))
{
$("#submit").removeAttr("disabled");
}
else{
$("#submit").attr("disabled", "disabled");
}
});
});
WORKING FIDDLE
You can use jQuery.validate. You can define custom validation methods too.
http://jqueryvalidation.org
You can use HTML5 validation. For example:
<input type="checkbox" required name="checkbox1" />
<input type="text" min="150" name="input1" />
You can see another example here http://www.w3schools.com/html/html5_form_attributes.asp
You can call it at textbox, radiobutton and checkbox onchange events.
EDIT:
$(document).ready(function () {
$("input").change(function () {
//call function.
});
});
I am trying to uncheck a radio button if it is checked, and likewise check a radio button if it is unchecked. However, it is always saying it is checked when it isn't.
Here is my code:
$('input[type=radio]').on('click', function() {
if ($(this).attr('checked') == 'checked') {
$(this).attr('checked', false);
} else {
$(this).attr('checked', true);
}
});
The above code always hits the first part of the if. I've also tried
$(this).is(':checked')
and
$(this).val()
and
$(this).attr('checked') == true
but nothing seems to be working.
How can I get this to work?
Here is the fiddle hope this myt help:
<input type="radio" name="" value="1000" align="middle" id="private_contest">1000 is the value<br>
<input type="radio" name="" value="2000" align="middle" id="private_contest">2000 is the value
and relevant jquery is:
$('input[type=radio]').on('click', function () {
$(this).siblings().prop('checked', true);
$(this).prop('checked', false);
});
You need to remove the attribute checked to uncheck, and add the attribute to check the radio button. Do not assign value to it:
<input type="radio" name="radio1">
<input type="radio" name="radio1" checked>
use:
$(this).addAttr("checked")
$(this).removeAttr("checked")
This should never fail, but it's a different approach.
Target the parent, and return which radio IS checked, rather than looking at all of them.
Just an idea
var myRadio;
$('#radioParent input:radio').click(function() {
myRadio = $(this).attr('id');
//console.log(myRadio);
//return myRadio;
});
I am not sure why this received negative votes. The usage of a radio button is so that you can have 0 or 1 options to select from, and a checkbox list is if you need 0 or many options selected. But what if you want to undo a radio button selection for an optional question?
I solved this by creating another attribute on radio buttons called "data-checked".
Below was the implementation:
$('input[type=radio]').on('click', function() {
var radioButton = $(this);
var radioButtonIsChecked = radioButton.attr('data-checked') == 'true';
// set 'checked' to the opposite of what it is
setCheckedProperty(radioButton, !radioButtonIsChecked);
// you will have to define your own getSiblingsAnswers function
// as they relate to your application
// but it will be something similar to radioButton.siblings()
var siblingAnswers = getSiblingAnswers(radioButton);
uncheckSiblingAnswers(siblingAnswers);
});
function uncheckSiblingAnswers(siblingAnswers) {
siblingAnswers.each(function() {
setCheckedProperty($(this), false);
});
}
function setCheckedProperty(radioButton, checked) {
radioButton.prop('checked', checked);
radioButton.attr('data-checked', checked);
}
On the page load, set the data-checked property to true or false, depending on whether or not it is already checked.
$(document).ready(function() {
$('input[type=radio]').each(function () {
var radioButton = $(this);
var radioButtonIsChecked = radioButton.attr('checked') == 'checked';
setCheckedProperty(radioButton, radioButtonIsChecked);
});
});
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.