I have a form which consists of some elements such as a select-input and a checkbox.
The submit-button is disabled and I want to enable the button only if two conditions are fulfilled. An initial version works well, but only if clicking on the checkbox is the last step. But it should be a function that reacts on both, clicks/changes in the select and the checkbox.
The following code is working but with the problem explained above.
$('#toscheck').click(function() {
if ($(this).is(':checked') && $("#ctry").val().length > 0) {
$('#pjo').removeAttr('disabled');
$('#sjo').removeAttr('disabled');
} else {
$('#pjo').attr('disabled', 'disabled');
$('#sjo').attr('disabled', 'disabled');
}
});
The following solution doesn't work:
$('document').ready(function() {
if ($('#toscheck').is(':checked') && $("#ctry").val().length > 0) {
$('#pjo').removeAttr('disabled');
$('#sjo').removeAttr('disabled');
} else {
$('#pjo').attr('disabled', 'disabled');
$('#sjo').attr('disabled', 'disabled');
}
});
But how can I solve this? What I have found on SO wasn't really helpful.
Again: it should work as following; if the checkbox is selected AND the selected option has a value, the button would be enabled.
Thanks in advance.
First, store you element in variables:
let $toscheck = $('#toscheck'),
$ctry = $("#ctry"),
$pjo = $('#pjo'),
$sjo = $('#sjo');
Then, create your validation function with the stored variables. Note that I replace attr and removeAttr with .prop, it is better:
function checkThings(){
if ($toscheck.is(':checked') && $ctry.val().length > 0) {
$pjo.prop('disabled', false);
$sjo.prop('disabled', false);
} else {
$pjo.prop('disabled', true);
$sjo.prop('disabled', true);
}
}
Then, bind the events:
$toscheck.add($ctry).on( 'change', checkThings );
Note that I used change on both elements since it does work with inputs and checkboxes.
Final code :
let $toscheck = $('#toscheck'),
$ctry = $("#ctry"),
$pjo = $('#pjo'),
$sjo = $('#sjo');
function checkThings(){
if ($toscheck.is(':checked') && $ctry.val().length > 0) {
$pjo.prop('disabled', false);
$sjo.prop('disabled', false);
} else {
$pjo.prop('disabled', true);
$sjo.prop('disabled', true);
}
}
$toscheck.add($ctry).on( 'change', checkThings );
$(document).ready(function() {
$('#toscheck,#ctry').change(function() {
if ($('#toscheck').is(':checked') && $("#ctry").val().length > 0) {
$('#pjo').removeAttr('disabled');
$('#sjo').removeAttr('disabled');
} else {
$('#pjo').attr('disabled', 'disabled');
$('#sjo').attr('disabled', 'disabled');
}
});
});
use this code
.change function detects change and then on call check whether your AND condition is met or not
and add #toscheck in quotes i.e. '#toscheck'
$('#toscheck,#xyz,#abc').change()
for detecting change for multiple elements
Related
How can I disable a anchor link if one(1) of my six(6) checkbox is not check?
var first_option = $('#pid-1590083, #pid-1590090, #pid-1590091, #pid-1590092, #pid-1590093, #pid-1590094');
$("a").click(function(e) {
if($("first_option").prop("checked") === false) {
e.preventDefault(); return false;
} else {return true;};
});
Your current logic doesn't work as you're only looking at the checked property of the first element you select, not all of them.
To achieve what you require, you can use the :checked selector to get all the checked elements within the selectors you provide, then check the length property of the result to see if there aren't any. Try this:
var $first_option = $('#pid-1590083, #pid-1590090, #pid-1590091, #pid-1590092, #pid-1590093, #pid-1590094');
$("#tmp_button-99035").click(function(e) {
if ($first_option.filter(':checked').length === 0) {
e.preventDefault();
alert('Please Choose Collar Colour To Continue');
};
});
first_option.prop("checked") will always check for first element. What you have to do is loop over all elements to check
Like this
$("#tmp_button-99035").click(function(e) {
var isChecked = false;
for (var i = 0; i < first_option.length; i++) {
if (first_option.eq(i).prop("checked")) {
isChecked = true;
break;
}
}
if (!isChecked) {
alert('Please Choose Collar Colour To Continue');
e.preventDefault();
}
return isChecked;
});
Well, the js snippet of yours is only checking the first element. So, you have to track other checkboxes as well for correct result.
var first_option = $('#pid-1590083, #pid-1590090, #pid-1590091, #pid-1590092, #pid-1590093, #pid-1590094')
$(document).on('click', '#tmp_button-99035', function (e) {
if ($(first_option).filter(":checked").length == 0) {
e.preventDefault();
}
});
In registration form I have a 2 radio button, when one button is selected a dropdown list appears. But after register fails, the selected radio button remains but the dropdown list is not shown anymore, I want the dropdown list to be shown after register fail. There should be a solution with local storage but I dont know exactly how to write it.
here is the code, what I should add to make it happen?
$(document).ready(function() {
$('input[type=radio][name=rdUserType]').change(function() {
if (this.value == '1') {
$('#cityClient').show();
$('#cityLawyer').hide();
}
else if (this.value == '0') {
$('#cityClient').hide();
$('#cityLawyer').show();
}
});
});
So I found the solution finally, I tried and made it :
<script>
$(document).ready(function() {
$('input[type=radio][name=rdUserType]').change(function() {
if (this.value == '1') {
$('#cityClient').show();
$('#cityLawyer').hide();
}
else if (this.value == '0') {
$('#cityClient').hide();
$('#cityLawyer').show();
}
localStorage.removeItem("last");
});
});
function fix(){
var check = localStorage.getItem("last");
console.log(check);
if (check === 'a') {
$('#cityClient').hide();
$('#cityLawyer').show();
}
else{
$('#cityClient').show();
$('#cityLawyer').hide();
}
}
function save(){
// rdAttorney is a id of the selected radio
if (document.getElementById('rdAttorney').checked) {
localStorage.setItem('last', 'a');
}
else{
localStorage.setItem('last', 'b');
}
}
window.onload = fix();
</script>
Working on jquery clone with my current code everthing works fine.
first scenario if user select other from the drop down the text
field gets enabled
Second scenario if user click addmore button div gets clone
perfectly with id when user select other both Original and clone
textfield gets enabled actually it should be only the cloned should
get enabled not the enabled
Here is the current Jquery code
var i=1;
$(document).on("click", ".edu_add_button", function () {
var i=$('.cloned-row1').length;
$(".cloned-row1:last").clone(true).insertAfter(".cloned-row1:last").attr({
'id': function(_, id) { return id + i },
'name': function(_, name) { return name + i }
}).end().find('[id]').val('').attr({ 'id': function(_, id) { return id + i }
});
$(".cloned-row1:last").find(".school_Name").attr('disabled', true).val('');
if(i < $('.cloned-row1').length){
$(this).closest(".edu_add_button").removeClass('btn_more edu_add_button').addClass('btn_less btn_less1');
}
i++;
return false;
});
$(document).on('click', ".btn_less1", function (){
var len = $('.cloned-row1').length;
if(len>1){
$(this).closest(".cloned-row1").remove();
}
});
$(document).on('change', '.txt_schName', function (){
var cur = $('.txt_schName').index($(this));
$('.school_Name').eq(cur).val($(this).val())
if ($(this).val() == "other") {
$(".school_Name").prop('disabled', false);
$(".school_Name").val('');
}else{
$(".school_Name").prop('disabled', true);
}
});
$(document).on('change', '.txt_degreName', function (){
var cur = $('.txt_degreName').index($(this));
$('.degree_Description').eq(cur).val($(this).val())
if ($(this).val() == "other") {
$("#degree_Description").prop('disabled', false);
$("#degree_Description").val('');
}else{
$("#degree_Description").prop('disabled', true);
}
});
Here is the fiddle link
Kindly suggest me
thanks & regards
Mahadevan
DEMO
The issue comes be cause you are using class selector directly. You need apply value only to the text box which belongs in the same container. Use closest() to find the parent.
$(document).on('change', '.txt_schName', function (){
var cur = $('.txt_schName').index($(this));
var container = $(this).closest('.container-fluid');
$('.school_Name').eq(cur).val($(this).val())
if ($(this).val() == "other") {
$(".school_Name", container).prop('disabled', false);
$(".school_Name", container).val('');
}else{
$(".school_Name", container).prop('disabled', true);
}
});
DEMO HERE
You need to refer proper element that has to be disabled and enabled.
Take the sibling of select's parent and find the input element to be disabled as below:
$(document).on('change', '.txt_schName', function (){
var cur = $('.txt_schName').index($(this));
$(this).closest('.col-xs-6').next('.col-xs-6').find('.school_Name').eq(cur).val($(this).val())
if ($(this).val() == "other") {
$(this).closest('.col-xs-6').next('.col-xs-6').find(".school_Name").prop('disabled', false);
$(this).closest('.col-xs-6').next('.col-xs-6').find(".school_Name").val('');
}else{
$(this).closest('.col-xs-6').next('.col-xs-6').find(".school_Name").prop('disabled', true);
}
});
From what you did, you actually change every fields with class .school_Name, to achieve what you want you can add $(this).parents(".row").find(".class_name") so it only change the current div.
$(document).on('change', '.txt_schName', function (){
var cur = $('.txt_schName').index($(this));
$('.school_Name').eq(cur).val($(this).val())
if ($(this).val() == "other") {
$(this).parents(".row").find(".school_Name").prop('disabled', false);
$(this).parents(".row").find(".school_Name").val('');
}else{
$(this).parents(".row").find(".school_Name").prop('disabled', true);
}
});
DEMO HERE
You can do it this way with targeting specific item using parent() and next() selector and also i prefer to access specific field instead of index(such as eq) for input.
var schoolObj = $(this).parent().next().find(".school_Name");
schoolObj.val($(this).val());
if ($(this).val() == "other") {
schoolObj.prop('disabled', false);
schoolObj.val('');
} else {
schoolObj.prop('disabled', true);
}
Here is the Fiddle
You can have a look for jquery traversing:
parent: https://api.jquery.com/parent/
Next: https://api.jquery.com/next/
Find: https://api.jquery.com/find/
and for full traversing: https://api.jquery.com/category/traversing/
I have a function that is supposed to catch changes to all checkboxes. It works when the boxes are clicked manually, but does not work when the toggleAll() function triggers them.
Anyway to correct this?
$(function() {
$(":checkbox").change(function(){
if ( this.checked ) {
alert(this.id+' is checked');
} else {
alert(this.id+' is not checked');
}
});
});
function toggleAll() {
var selectAllCheckbox = $("#selectAllCheckbox");
if ( selectAllCheckbox.prop('checked') ) {
// uncheck them all
$("[id^=friendRequestCheckbox]").attr('checked', false);
} else {
// check them all
$("[id^=friendRequestCheckbox]").attr('checked', true);
}
}
I am running an old version of jQuery and have not updated to the new version including prop, just in case that's relevant.
When changing elements programmatically, you also have to trigger the event programmatically. Try :
$("[id^=friendRequestCheckbox]").trigger('change')
I'm trying to remove a option with value equal to MRW if #natural_person_lives_in_ccs_0 is checked but if I unchecked the checkbox then the SELECT should be as it was by default meaning same options. This is what I did:
$(document).ready(function(){
var lives_in_css = $('#natural_person_lives_in_ccs_0').is(':checked');
if (lives_in_css) {
$(".shipping_from option[value='MRW']").remove();
} else {
$(".shipping_from").append('<option value="MRW">Option1</option>');
}
});
But it's not working since Option1 is added by default and I don't know how to write this. I think to use .toggle() but don't know if it's the right one. I leave a Plunker here for testing. Any help on this?
Steps:
Check Yes option value=MRW should be removed
Remove the check from Yes option value=MRW as by default (same position)
Try to use the .change() function to accomplish your task here,
$('#natural_person_lives_in_ccs_0').click(function () {
var elem = $(".shipping_from option[value='MRW']");
if (this.checked) {
elem.remove();
} else if (elem.length == 0) {
$(".shipping_from").prepend('<option value="MRW">Option1</option>');
}
});
DEMO
The best way would be,
$('#natural_person_lives_in_ccs_0').click(function () {
$(".shipping_from option[value='MRW']").toggle(!this.checked);
$(".shipping_from option:eq(" + ((this.checked) ? 1 : 0) + ")").prop('selected', true);
});
DEMO
Write your script like bellow.
var showOptionsAcorrdingCheckbox = function(){
var lives_in_css = $('#natural_person_lives_in_ccs_0').is(':checked');
if (lives_in_css) {
$(".shipping_from option[value='MRW']").remove();
} else {
$(".shipping_from").append('<option value="MRW">Option1</option>');
}
}
$(document).ready(function(){
$(':checkbox').change(showOptionsAcorrdingCheckbox);
});
DEMO
code:
$(document).ready(function(){
$(document).on('change', '#natural_person_lives_in_ccs_0', function(){
if($(this).is(':checked'))
{
$(".shipping_from option[value='MRW']").remove();
}
else
{
$(".shipping_from").append('<option value="MRW">Option1</option>');
}
});
});