Как отключить кнопку до выбора?

Question

У меня есть два элемента select, и я хочу отключить кнопку отправки, пока оба не будут иметь значение.

Я немного поискал и нашел один хороший код, который работает со старым jQuery. Новая версия нуждается в обновлении, чтобы работать с jQuery 3.2.1, который сейчас используется на моем веб-сайте.

Я надеюсь, что кто-то объяснит мне, почему мой код отлично работает на 1.5.2 и не работает на 3.2. 1 версия jQuery.

Вот основная c HTML из двух выборок, поэтому я хочу включить кнопку только тогда, когда оба выбора имеют какое-то значение

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

Answer 1

Вот JSFiddle, созданный из заданных HTML и JS: https://jsfiddle.net/9e4yqthv/

Есть незначительные проблемы с HTML, исправьте их (отсутствует </select>, </h3>, и др. c). Что касается основной проблемы, похоже, что строка:

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

не включает кнопку (кнопка все еще имеет свойство disabled). Для этого измените его на:

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

И сравнение под verifyAdSettings некорректно - чтобы проверить выбор, проверьте, является ли значение null, а не '':

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

ПРИМЕЧАНИЕ. Как упоминалось Hereti c Monkey в комментариях, использование .prop() предпочтительнее .attr() для включения / отключения элементов.

Использование:
$('$btnProceed').prop('disabled', true); отключить
$('$btnProceed').prop('disabled', false); включить