Selects enable a button

Selects enable a button

by Nirvanachain

HTML

<form id="myForm" action="">
    
    <p>
        <select class="mySelect">
            <option value="" selected="selected">Please select a city</option>
            <option value="Saint Paul">Saint Paul</option>
            <option value="Minneapolis ">Minneapolis</option>
            <option value="Woodbury ">Woodbury</option>
            <option value="Cottage Grove ">Cottage Grove</option>
        </select>
    </p>
    
    <p>&nbsp; is</p>
    
    <p>
        <select class="mySelect">
            <option value="" selected="selected">Select an opinion</option>
            <option value="Awesome">Awesome</option>
            <option value="Rocks">Rocks</option>
            <option value="Sweet">Sweet</option>
            <option value="Cool">Cool</option>
        </select>
    </p>
   
    <p>
        <input type="submit" name="submit" value="Submit" id="mySubmit" disabled="disabled" />
    </p>
    
</form>

JavaScript

//Probably better to set the "disabled property in the Submit <input>.  This way a user can not click the Submit Button when the JavaScript is turned off.
//$("#mySubmit").prop("disabled", true);  

$("select.mySelect").change(function() {
  var total = $("select.mySelect").length;
  var list = $("#myForm").find("select.mySelect option[value != '']:selected").length;
    
    $("#mySubmit").prop("disabled", (list != total));
  
});