How to make a function with multi-condition if-function work?

Question

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.

$(#toscheck) -> $('#toscheck'). Voting to close as a typo. Also note that you can combine selectors: $('#pjo, #sjo').removeAttr('disabled');. I'd also suggest using prop() over attr(). Then you can so .prop('disabled', true) or false as needed — Rory McCrossan
– Rory McCrossan, Commented May 18, 2018 at 15:30
The solution had the '. This was not the problem. I had them in the code. Deleted this and entered from my mind. — nucky
– nucky, Commented May 18, 2018 at 15:33
@rory the problem described by the OP is not related to the typo. — Jonas Wilms
– Jonas Wilms, Commented May 18, 2018 at 15:35

Karl-André Gagnon · Accepted Answer · 2018-05-18 15:37:29Z

2

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 );

answered May 18, 2018 at 15:37

Karl-André Gagnon

33.9k5 gold badges53 silver badges77 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

nucky Over a year ago

Works even a bit better than Avi's solution. Thanks.

Avi Sangray · Accepted Answer · 2018-05-18 15:44:46Z

1

$(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

edited May 18, 2018 at 15:44

answered May 18, 2018 at 15:33

Avi Sangray

4604 silver badges16 bronze badges

3 Comments

nucky Over a year ago

As soon as the six minutes are over which SO shows me I will accept your answer. :-) As for the quotes, I got them in my initial second solution which I then deleted as it didn't work. But you are right.

Karl-André Gagnon Over a year ago

FYI, document doesn't need quotes. It forces jQuery to do a querySelectorAll which returns nothing and is not needed.

Avi Sangray Over a year ago

here it is was a quick copy paste type :). @nucky you could also use multiple elements in .change function

Collectives™ on Stack Overflow

How to make a function with multi-condition if-function work?

2 Answers 2

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related