Im trying to make this function to check an element and if its checked, or not, add or remove respective className. Also, if the element is disabled but is checked, it should un-check it and remove the className('yes')
function init() {
$(document.body).select('input').each(function(element) {
if (!element.checked) {
element.up().removeClassName('yes');
} else {
element.up().addClassName('yes');
}
if (element.checked && element.disabled) {
element.checked = false;
element.up().removeClassName('yes')
}
});
}
Right now, the last part, is not working, no effect
Did you try element.checked = !element.checked in the last part instead of element.checked = false?
Related
A common checkbox is available here. .bucret
If these two ids are selected, the value will be printed. .bucret + .engelli
$(".engelli, .bucret").click(function () {
let isBox2Checked = $('.engelli input').is(':checked');
let isBox3Checked = $('.bucret input').is(':checked');
if (isBox2Checked && isBox3Checked) {
$('#textbox2').attr('value', '1.800,00');
} else {
$('#textbox2').attr('value', '');
}
If the .bucret checkbox alone is checked, this value is written.
$('.bucret').change(function() {
if ($('.bucret input').is(':checked')) {
$('#textbox2').attr('value', '1.950,08');
} else {
$('#textbox2').attr('value', '');
}
});
});
Unfortunately it doesn't work that way. First, I select .engelli id, then the .bucret id is selected and the value is written as 1.950.08.
Your issue occurs because you have two different event listeners that do their own thing. The last one firing is the one that wins. Why not combine your logic in one listener?
I'd advice to use the change event instead of click. Write an extra else if statement to see if only .bucret is checked or not.
$(".engelli, .bucret").on('change', function () {
let isBox2Checked = $('.engelli input').is(':checked');
let isBox3Checked = $('.bucret input').is(':checked');
if (isBox2Checked && isBox3Checked) {
$('#textbox2').attr('value', '1.800,00');
} else if (isBox3Checked) {
$('#textbox2').attr('value', '1.950,08');
} else {
$('#textbox2').attr('value', '');
}
});
I have two group of checkbox newBuilding & oldBuilding.
Idea over here is I can select checkbox only one of the group.
In each group there is checkbox name other area, so I when click on it, it will show and hide textbox next to it.
Now to achieve first point, lets for example that already we have oldBuilding checkboxes are checked and I if I click one of the newBuilding checkbox then it will remove the check from oldBuilding group but newBuilding checkbox will not get checked but just get focus, I have to click again to check.
What I found out that above issue happen when I call trigger event. How can I overcome the issue
Code for other area
$("#chkOldBuildingOtherAreas").change(function () {
if ($("#chkOldBuildingOtherAreas").is(":checked"))
$("#txOldOtherAreas").show();
else
$("#txOldOtherAreas").hide();
});
$("#chkNewBuildingOtherAreas").change(function () {
if ($("#chkNewBuildingOtherAreas").is(":checked"))
$("#txNewOtherAreas").show();
else
$("#txNewOtherAreas").hide();
});
Code for removing check mark from other groups
$("input[name='oldBuilding']").change(function () {
if ($("input[name='newBuilding']:checked").length > 0) {
$("input[name='newBuilding']").removeAttr('checked');
$("#chkNewBuildingOtherAreas").trigger("change");
}
});
$("input[name='newBuilding']").change(function () {
if ($("input[name='oldBuilding']:checked").length > 0) {
$("input[name='oldBuilding']").removeAttr('checked');
$("#chkOldBuildingOtherAreas").trigger("change");
}
});
My jsfiddle
https://jsfiddle.net/milindsaraswala/wchrwjnx/
https://jsfiddle.net/1ny36nwL/4/
var groups = ['.oldGroup', '.newGroup'];
$(groups.join(',')).find('input[type=text]').hide();
function resetGroup(selector) {
//clear and hide texts
$('input[type=text]', selector).val('').hide();
//uncheck boxes
$('input[type=checkbox]', selector).removeAttr('checked');
}
$("input[name='oldBuilding']").change(function(e) {
if (this.id == 'chkOldBuildingOtherAreas') {
$("#txOldOtherAreas").toggle();
}
resetGroup('.newGroup');
});
$("input[name='newBuilding']").change(function(e) {
if (this.id == 'chkNewBuildingOtherAreas') {
$("#txNewOtherAreas").toggle();
}
resetGroup('.oldGroup');
});
as you can see I added groups var which can contain multiple groups (not only two), but code need to be changed a little more for that to work
you need to detect id/class of current group by something like $(this).closest('.form-group').id and reset every group except current group. in that way you can leave only one change function which will be universal
oh and you also need to add some class for checkbox that contain text input, and if that checkbox is clicked, trigger toggle for input. so it won't be if (this.id == 'chkNewBuildingOtherAreas') { but something like if ($(this).hasClass('has-input'))
Try replacing this in your code. It should work.
$("#txOldOtherAreas").hide();
$("#txNewOtherAreas").hide();
$("input[name='oldBuilding']").change(function (e) {
$("input[name='newBuilding']").removeAttr('checked');
e.target.checked = true;
if (e.target.id == "chkOldBuildingOtherAreas") {
$("#txOldOtherAreas").show();
$("#txNewOtherAreas").hide();
} else {
$("#txNewOtherAreas").hide();
}
});
$("input[name='newBuilding']").change(function (e) {
$("input[name='oldBuilding']").removeAttr('checked');
e.target.checked = true;
if (e.target.id == "chkNewBuildingOtherAreas") {
$("#txNewOtherAreas").show();
$("#txOldOtherAreas").hide();
} else {
$("#txOldOtherAreas").hide();
}
});
You can try following code to fix the problem (Tested in fiddle):
$('#txNewOtherAreas, #txOldOtherAreas').hide();
$('input[name="oldBuilding"]').on('click', function(){
if($('input[name="newBuilding"]').is(':checked')){
$('input[name="newBuilding"]').removeAttr('checked');
$('#txNewOtherAreas').hide();
}
});
$('input[name="newBuilding"]').on('click', function(){
if($('input[name="oldBuilding"]').is(':checked')){
$('input[name="oldBuilding"]').removeAttr('checked');
$('#txOldOtherAreas').hide();
}
});
$('#chkNewBuildingOtherAreas').on('click', function() {
if($(this).is(':checked')){
$('#txNewOtherAreas').show();
} else {
$('#txNewOtherAreas').hide();
}
});
$('#chkOldBuildingOtherAreas').on('click', function() {
if($(this).is(':checked')){
$('#txOldOtherAreas').show();
} else {
$('#txOldOtherAreas').hide();
}
});
I have a jquery function for multiple delete.
$('input.delete-selected[type="submit"]').attr('disabled','disabled');
$('[id^=partners_], [id^=invitations_], [id^=clients_], [id^=partner_services_], [id^=partner_products_]').on("click", function (event) {
if ($(this).is(":checked")) {
$('input.delete-selected[type="submit"]').removeAttr('disabled');
} else {
$('input.delete-selected[type="submit"]').attr('disabled', 'disabled');
}
})
The problem is, if I have 2 items, select both and then deselect one of them, the 'delete' button disables again.
How can I disable the button only if no checkbox is checked?
Do I have to implement an each function?
Use prop():
$('input.delete-selected[type="submit"]').prop('disabled', ($('[id^=partners_]:checked, [id^=invitations_]:checked, [id^=clients_]:checked, [id^=partner_services_]:checked, [id^=partner_products_]:checked').length == 0));
This will disable the button depending on the second parameter evaluation state.
If it is true, button will be disabled, if not button will be enabled.
$('[id^=partners_]:checked, [id^=invitations_]:checked, [id^=clients_]:checked, [id^=partner_services_]:checked, [id^=partner_products_]:checked').length will get the number of checkboxes checked.
Try this : get all checkbox selector in one variable and bind the click event to it. Inside click handler see if any of the checkbox is checked then enable / disable the button accordingly. Use .prop() instead of .attr()
$('input.delete-selected[type="submit"]').attr('disabled','disabled');
var $checkbox = $('[id^=partners_], [id^=invitations_], [id^=clients_], [id^=partner_services_], [id^=partner_products_]');
$($checkbox).on("click", function (event) {
$('input.delete-selected[type="submit"]').prop('disabled', $checkbox.is(':checked').length==0);
});
You can use a variable flag to count how much checkbox is checked, if atleast one is checked then remove disabling else you know.
$('input.delete-selected[type="submit"]').attr('disabled','disabled');
$('[id^=partners_], [id^=invitations_], [id^=clients_], [id^=partner_services_], [id^=partner_products_]').on("click", function (event) {
var flag = 0; //HERE IS THE VARIABLE
if ($(this).is(":checked")) {
flag += 1; //HERE
} else {
flag -= 1; //HERE
}
});
if(flag <= 0)
{
$('input.delete-selected[type="submit"]').attr('disabled', 'disabled');
}
else {
$('input.delete-selected[type="submit"]').removeAttr('disabled');
}
$('input.delete-selected[type="submit"]').attr('disabled','disabled');
$('[id^=partners_], [id^=invitations_], [id^=clients_], [id^=partner_services_], [id^=partner_products_]').on("click", function (event) {
if ($(this).siblings().andSelf().prop("checked").length > 0) {
$('input.delete-selected[type="submit"]').removeAttr('disabled');
} else {
$('input.delete-selected[type="submit"]').attr('disabled', 'disabled');
}
})
How do I disable and make the input field text to hidden when certain value is selected from select list? In my code, I need to disable and make the input text to hidden when "United States" is selected from my drop down.
My HTML:
JSFiddle Link
My Javascript:
document.getElementById('BillingCountryCode').onchange = function () {
if(this.value != '840') {
document.getElementById("BillingStateProvince").disabled = true;
document.getElementById("BillingStateProvince").style.display="none"
} else {
document.getElementById("BillingStateProvince").disabled = false;
document.getElementById("BillingStateProvince").style.display="block"
}
}
The problem with your fiddle is you have two elements with the same ID. You can do exactly what is already there, just change the ID on either the state dropdown or the text input. Updated code might look like this, if you simply name the text input the same with a 2:
document.getElementById('BillingCountryCode').onchange = function () {
if(this.value != '840') {
document.getElementById("BillingStateProvince").disabled = true;
document.getElementById("BillingStateProvince").style.display="none";
document.getElementById("BillingStateProvince2").disabled = false;
document.getElementById("BillingStateProvince2").style.display="block";
}
else {
document.getElementById("BillingStateProvince").disabled = false;
document.getElementById("BillingStateProvince").style.display="block";
document.getElementById("BillingStateProvince2").disabled = true;
document.getElementById("BillingStateProvince2").style.display="none";
}
}
If i got the question , simply invert the if condition like this :
if(this.value === "840") { ... }
here is the working fiddle : http://jsfiddle.net/antwonlee/cf4Sz/7/
Hey all. I've been been trying to figure this out for a while now.
I create a jQuery object of checkboxes and store it in a variable:
$group1 = $('#checkbox1,#checkbox2,#checkbox3,#checkbox4');
The user cannot continue unless all checkboxes in that group are checked.
I've been using an if statement combined with .is(':checked') to find a boolean value:
if( $group1.is(':checked') ){
//continue is OK
}
...but .is(':checked') will return TRUE if any checkboxes are checked within the group. Essentially, .is(':checked') performs an OR operation on the selected elements in $group1. I'm looking for an AND operation, so all selected elements must be checked to return TRUE. Is there a jQuery function that does this, or another workaround?
#Adam is off just a bit
if( $group1.filter(':not(:checked)').length === 0){
//continue is OK
}
Corrected:
You could filter to get only the elements that are not checked, and then check to see if any are any elements still in the collection, if there are not than all the elements in the group are checked:
if( $group1.filter(':not(:checked)').length === 0){
//continue is OK
}
I think you need something like:
$(document).ready(function(){
var checked = true;
$('input:checkbox').each(function(){
if(checked){
checked = $(this).is(':checked');
}
});
});
This should set checked = false if any of them are unchecked.
I would suggest that you give your checkboxes a a class then
var len = $('.check_needed').length;
var chk = $('.check_needed:checked').length;
if (len == check){
//carry on
}else{
// go home
}
You can use also
$(function(){
// add multiple select / deselect functionality
$("#selec_all_chk").click(function () {
$('.chk_class').attr('checked', this.checked);
});
// if all checkbox are selected, check the selectall checkbox
// else uncheck
$(".chk_class").click(function(){
if($(".chk_class").length == $(".chk_class:checked").length) {
$("#selec_all_chk").attr("checked", "checked");
} else {
$("#selec_all_chk").removeAttr("checked");
}
});
});