Disable submit button when multiple dropdown values equal specific value

I'm trying to disable the submit button on a form when all of the dropdowns are set to the same specific value (the starting/default value).

The page contains a form, and users select an option on one of the dropdowns (but never two drop downs at a time) and then push the submit button to generate a document based on that selection.

The dropdowns and submit button look like this:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
  $('#drop1').change(function() {
    if ($('#drop1').val() == 'select' && $('#drop2').val() == 'select') {
      $('#subsubmit').attr("disabled", true);
    }
  });

  $('#drop2').change(function() {
    if ($('#drop1').val() == 'select' && $('#drop2').val() == 'select') {
      $('#subsubmit').attr("disabled", true);
    }
  });
</script>
<select name="drop1" ID="drop1" class="form-control">
  <option class="dropdown-item" name="select" value="select">Select From Below</option>
  <option class="dropdown-item" name='thing1' value="thing1">thing1</option>
  <option class="dropdown-item" name='thing2' value="thing2">thing2</option>
</select>

<select name="drop2" ID="drop2" class="form-control">
  <option class="dropdown-item" name="select" value="select">Select From Below</option>
  <option class="dropdown-item" name='thing3' value="thing3">thing3</option>
  <option class="dropdown-item" name='thing4' value="thing4">911</option>
</select>

<input class="btn btn-primary" type="submit" id="subsubmit" value="Generate">

I'm trying to make it so that if all dropdowns are set to "select" (the default/starting option) the submit button is disabled.

I'm using this to make sure that only one option is selected between the two dropdowns:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
  $('#drop1').change(function() {
    $('#drop2').prop('selectedIndex', 0);
  });


  $('#drop2').change(function() {
    $('#drop1').prop('selectedIndex', 0);
  });
</script>
<select name="drop1" ID="drop1" class="form-control">
  <option class="dropdown-item" name="select" value="select">Select From Below</option>
  <option class="dropdown-item" name='thing1' value="thing1">thing1</option>
  <option class="dropdown-item" name='thing2' value="thing2">thing2</option>
</select>

<select name="drop2" ID="drop2" class="form-control">
  <option class="dropdown-item" name="select" value="select">Select From Below</option>
  <option class="dropdown-item" name='thing3' value="thing3">thing3</option>
  <option class="dropdown-item" name='thing4' value="thing4">911</option>
</select>

<input class="btn btn-primary" type="submit" id="subsubmit" value="Generate">

Which sets one menu back to the default if the other one is changed, and visa versa.

I want this to work, and it seems like it should, but it doesn't - probably because I don't really know how to use jquery:

Which to me seems like it should: 1) on the change of either drop down; 2) check to see if the value of each dropdown is set to 'select'; and 3) if they both are, disable the submit button - but it doesn't seem to do anything.

Ideally, I'd like this to work with 3 or 4 dropdowns, but I can't get the desired effect with even these two. Any suggestions on how to fix this, or something else I should be trying?

Solution

You can use class for all <select> instead of id then use only one change handler for them
^[1] Get the length of other <select> which has select value by using .filter() and .length
^[2] Toggle disabled using .prop() and short hand if statement () ? :
^[3] Return back all other <select> to select value
^[4] Finally you can use .change() at the end to run the change event onload

^{Please read //comments in the code below}

$('.drop-select').change(function(){
    var AnotherSelected = $(".drop-select").not(this).filter(function(){
        return this.value == "select";
    }).length; // get the number of select which has 'select' value
    $('#subsubmit').prop("disabled", AnotherSelected > 0 && this.value == 'select' ? true : false);  // toggle the disabled when all select value = 'select'
    $('.drop-select').not(this).val("select"); // return all other select to 'select' value
}).change();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="drop1" class="form-control drop-select">
<option class="dropdown-item" name="select" value="select">Select From Below</option>
<option class="dropdown-item" name='thing1' value="thing1">thing1</option>
<option class="dropdown-item" name='thing2' value="thing2">thing2</option>
</select>

<select name="drop2" class="form-control drop-select">
<option class="dropdown-item" name="select" value="select">Select From Below</option>
<option class="dropdown-item" name='thing3' value="thing3">thing3</option>
<option class="dropdown-item" name='thing4' value="thing4">911</option>
</select>

<select name="drop3" class="form-control drop-select">
<option class="dropdown-item" name="select" value="select">Select From Below</option>
<option class="dropdown-item" name='thing1' value="thing5">thing5</option>
<option class="dropdown-item" name='thing2' value="thing6">thing6</option>
</select>

<select name="drop4" class="form-control drop-select">
<option class="dropdown-item" name="select" value="select">Select From Below</option>
<option class="dropdown-item" name='thing3' value="thing7">thing7</option>
<option class="dropdown-item" name='thing4' value="thing8">thing8</option>
</select>
<input class="btn btn-primary" type="submit" id="subsubmit" value="Generate">