在选择一个选项之前，如何禁用下一个按钮？

Question

I have the following code. The next button is currently disabled, however, I want the next button to not be disabled when an option from my select input is chosen (not including the first option which is disabled).

  $(document).ready( function(){
var $option = $("option:contains('Please select an option')");
var $btnNext2 = $('button.cf7mls_next');
$option.attr('disabled',true);
$btnNext2.attr('disabled',true);
});

I am assuming there will need to be an if statement involved somewhere, however, I am working with contact form 7 on WordPress so it may be slightly different.

Any help would be appreciated, thank you.

Answer 1

To do what you require you need to attach a change event handler to the select which detects what the selected value is, and then enables/disables the button based on that value:

 jQuery($ => { let $btn = $('.cf7mls_next'); $('select').on('change', e => { $btn.prop('disabled', e.target.value == ''); }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script> <select> <option value="">Please select an option</option> <option value="Foo">Foo</option> <option value="Bar">Bar</option> <option value="Fizz">Fizz</option> <option value="Buzz">Buzz</option> </select> <button class="cf7mls_next" disabled>Next</button>