It should be really simple but I can't figure it out, so any help would be gratefully received.

I have a very simple pop-up with a form dropdown with some disabled options and some valid options.

    <select name="dates" id="dates">
      <option value=""> --- Please Select --- </option>
      <option value="1" disabled="">July 11th - 18th FULLY BOOKED</option>
      <option value="2" disabled="">July 19th - 26th FULLY BOOKED</option>
      <option value="3" disabled="">July 27th - 31st FULLY BOOKED</option>
      <option value="4" disabled="">August 1st - 8th FULLY BOOKED</option>
      <option value="5" disabled="">August 9th - 16th FULLY BOOKED</option>
      <option value="6" disabled="">August 17th - 24th FULLY BOOKED</option>
      <option value="7" disabled="">August 25th - 31st FULLY BOOKED</option>
      <option value="8" disabled="">September 1st - 8th FULLY BOOKED</option>
      <option value="9" disabled="">September 9th - 16th FULLY BOOKED</option>
      <option value="10" disabled="">September 17th - 24th FULLY BOOKED</option>
      <option value="11" disabled="">September 25th - 30th FULLY BOOKED</option>
      <option value="12">October 1st - 8th AVAILABLE</option>
      <option value="13">October 9th - 16th AVAILABLE</option>
      <option value="14">October 17th - 24th AVAILABLE</option>
      <option value="15">October 25 - 31st AVAILABLE</option>
      </select> 
<button type="button">Accept</button>

What I need to achieve is

1. for the 'Accept' button to be disabled until a valid option is selected from the dropdown (values 12,13,14,15),

2. once a valid selection is made and the button is enabled; to close the popup when the button is clicked.

No data is sent anywhere, I just need a user to make a selection and then close the popup.

TIA

CodePudding user response：

I would do something like this: start with the disabled button and add an id to it, so it's easier to intercept.

<button type="button" id="submit" disabled>Accept</button>

Then the jquery part, you could listen to the select change, grab it's value, save it to a variable and enable the button if value is not empty

var myValue = "";

$("#dates").on("change", function(){
  myValue = $(this).val();

  if(myValue != ""){
    $("#submit").prop("disabled", false);
    console.log("you selected the option "   myValue);
  }else{
    // if for some reason the user selects the empty option, disable the button again
    $("#submit").prop("disabled", true);
  }
});

// here the button is enabled and your variable holds the selected value, so you can do something with it
$("#submit").on("click", function(){
  alert("submitting selection "   myValue);
  // ... do what you need with the data
});

The menu will close automatically after you click outside of it, so no need to add code for that