CODEWITHSUNDEEP
jquery
darcher
darcher

Reputation: 3134

Disable button if class exists else remove disabled

I'm trying to make a validation run on('keyup') instead of on('blur'). The goal is to prevent forward progress if all fields don't validate. The way it works, all parent div's have a class .item and with the "current working jquery" also has a class .bad, if bad isn't found it enables the next button. See code below:

Current Working jQuery:

    $('input[required]').change(function(){
       var v = this.value;
       $(this).closest('div.item')[$.trim(v).length !== 0 ? 'addClass' : 'removeClass']('bad');
       $('input[type="button"].next').prop('disabled', function(){
           return $(this).closest('fieldset').find('div.bad').length > 0;
       });
   }).change();

Now I'm trying to set a specific function to each fieldset to return a specific number of classes true, then activate. So if "4" classes "div.good" are present, removeAttr('disabled') from ".next"

    <!-- when page loads -->
    <div class="item"><input required></div>

    <!-- if it doesn't validate -->
    <div class="item bad">
      <input required>
      <div class="alert">why it isn't validating</div>
    </div>

    <!--  and if it does validate it changes to -->
    <div class="item good"><input required></div>

Logic and concept - poor execution - jquery

($("fieldset.first").children().find('.good')[4]){ //should I use .length !== 4?
  $('.next').removeAttr('disabled');
}else{
  $('.next').attr('disabled', true);
}

Upvotes: 0

Views: 1591

Answers (2)

vladrbyte
vladrbyte

Reputation: 1

I'm a little bit lazy to go inside of your code, but I want to say thank you, and share my snippet with almost the same logic. my goal was to make button disable if some of input fields has a special class (f.e. 'rottenClass'). so I wrote following if-condition:

let rottenClass = document.querySelectorAll('.rottenClass')

if (rottenClass.length>0) {
  $("#okButton").prop( "disabled", true );
} else {
  $("#okButton").prop( "disabled", false );
}

so I made a NodeList of all elements with a class rottenClass and than I check if its bigger than 0 or not. true = disable, false = enable.

Upvotes: 0

Arun P Johny
Arun P Johny

Reputation: 388336

Try

$('.next').prop('disabled', $('div.item').has('.alert').length > 0);

Upvotes: 1

Related Questions