How to disable button until selections?

Question

I have two select elements and I want to disable submit button until both is has value.

I did some search and I found one nice code which works on old jQuery. The new version need update to work on jQuery 3.2.1 which my website currently uses.

I hope someone will provide me explanation why my code works perfectly on 1.5.2 and won't work on 3.2.1 version of jQuery.

Here is basic HTML of two selects, so I want to enable button only when both select has some value

$('#btnProceed').attr('disabled', 'disabled');

function updateFormEnabled() {
  if (verifyAdSettings()) {
    $('#btnProceed').attr('disabled', '');
  } else {
    $('#btnProceed').attr('disabled', 'disabled');
  }
}

function verifyAdSettings() {
  if ($('#buyoption').val() != '' && $('#selloption').val() != '') {
    return true;
  } else {
    return false
  }
}

$('#buyoption').change(updateFormEnabled);

$('#selloption').change(updateFormEnabled);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<form action="" method="POST" id="postForm">
  <div class="row">
    <div class="col-md-9 register-right">
      <div class="tab-content" id="myTabContent">
        <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
          <h3 class="register-heading">
            <div class="row register-form">
              <div class="col-md-12">
                <div class="form-group">
                  <select class="form-control" name="buy" id="buyoption">
                    <option class="hidden" selected disabled value="">Please select what you want</option>
                    <option value="1">1</option>
                    <option value="2">2</option>
                  </select>
                </div><label for="buy"><b>YOU </b></label>
                <div class="form-group">
                  <select class="form-control" name="sell" id="selloption">
                    <option class="hidden" selected disabled value="">Please select what you to</option>
                    <option value="1">1</option>
                    <option value="2">2</option>
                </div><input type="submit" class="btnRegister" id="btnProceed" value="NEXT" /> </div>
            </div>
        </div>
      </div>
    </div>
  </div>
</form>

Sorry i am new to this website, i will make a edit on the tags. Hope it will not push you guys from helping me — Ajmoopetpokusat, May 04 '20 at 19:51
Please share HTML so we have Minimal, Reproducible Example https://stackoverflow.com/help/minimal-reproducible-example — ikiK, May 04 '20 at 19:57
@ikiK Just did it. I post two selects with html code. Now i only need explanation or edit of my jquery to work with version of 3.2.1 — Ajmoopetpokusat, May 04 '20 at 20:02
I've updated your snippet to combine the HTML and jQuery code in a single snippet. It is using 1.5.1 because 1.5.2 is unavailable from the the provider Stack Overflow uses. I don't believe there were any major changes between the two versions. — Heretic Monkey, May 04 '20 at 20:07
I strongly suggest you do some research into the changes that have occurred over the last two versions of jQuery and try to solve the problem yourself. You'll learn a lot and be better prepared for future endeavors. — Heretic Monkey, May 04 '20 at 20:08
@HereticMonkey , dude , I want script working in 3.2.1 .. I can not switch version on my website. so please help me with real problem not with making my post or problem in eye beautifull. but anyway thanks for edits. — Ajmoopetpokusat, May 04 '20 at 20:10
@HereticMonkey , I don't have time, it must be done today... — Ajmoopetpokusat, May 04 '20 at 20:11

Vedaant Arya · Accepted Answer · 2020-05-04T20:58:33.867

Here's a JSFiddle made from the given HTML and JS: https://jsfiddle.net/9e4yqthv/

There are minor issues with the HTML, please correct them (missing </select>, </h3>, etc). As for the main issue, it seems that the line:

$('#btnProceed').attr('disabled', '');

Does not enable the button (the button still has the disabled property). For that, change it to:

$('#btnProceed').removeAttr('disabled');

And the comparison under verifyAdSettings is incorrect - to check for a selection, check if the value is null, not '':

if ($('#buyoption').val() != null && $('#selloption').val() != null) {

NOTE: As mentioned by Heretic Monkey in the comments, using .prop() is preferable to .attr() for enabling/disabling elements.

Usage:
$('$btnProceed').prop('disabled', true); to disable
$('$btnProceed').prop('disabled', false); to enable

You should be using `prop('disabled', false)` for enabling a button and `prop('disabled', true)` for disabling, as mentioned in [.prop() vs .attr()](https://stackoverflow.com/q/5874652/215552) — Heretic Monkey, May 04 '20 at 20:38

How to disable button until selections?

1 Answers1