javascript - 当未选择 select 元素的第二个选项时禁用按钮

Question

我有两个选择下拉菜单和一个按钮。我希望在除一个选项外没有选择第二个选项时禁用该按钮。

当我选择第一个选项时，第二个字段出现，除了一个选项，那个选项只有一个选择元素，所以按钮必须是可点击的。

// linking values to dropdowns
var placesLists = {
  'uiteten': '#uiteten',
  'snackensnoepen': '#snackensnoepen',
  'drankje': '#drankje',
  'evenement': '#evenement',
  'stappen': '#stappen',
  'cultuur': '#cultuur',
  'sightseeing': '#sightseeing',
  'kids': '#kids',
  'informatie': '#informatie',
};

$('select[name=watwiljedoen]').change(function() {
  //hide all extra lists
  $('.hide').hide().prop("disabled", true);
  $('#disabledselect').hide();

  //get current value
  var value = $(this).val();

  //if there is a list for this value, show it
  if (value in placesLists) {
    $(placesLists[value]).show().prop("disabled", false);
    $(placesLists[value]).removeClass('dropdownwwjdnonactive');
    $(placesLists[value]).addClass('dropdownwwjd');
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form class="" action="wat-wil-je-doen" role="form" method="post">
      <select class="dropdownwwjd" name="watwiljedoen">
        <option value="lorem" disabled selected>Wat wil je gaan doen?</option>
        <option value="shoppen">Shoppen</option>
        <option value="uiteten">Uit eten</option>
        <option value="snackensnoepen">Snacken / snoepen</option>
        <option value="drankje">Drankje doen</option>
        <option value="evenement">Evenementen bezoeken</option>
        <option value="stappen">Stappen</option>
        <option value="cultuur">Cultuur snuiven</option>
        <option value="sightseeing">Sightseeing</option>
        <option value="kids">Kids</option>
        <option value="informatie">Meer informatie</option>
      </select>
      <select id="disabledselect" class="dropdownwwjdnonactive" disabled>
        <option value="sdgsdg">Verfijn je keuze</option>
      </select>
      <select id="uiteten" class="dropdownwwjdnonactive hide" name="tag">
        <option disabled selected>Verfijn je keuze</option>
        <option value="ontbijt">Ontbijt</option>
        <option value="lunch">Lunch</option>
        <option value="diner">Diner</option>
        <option value="vis">Vis</option>
        <option value="vlees">Vlees</option>
        <option value="broodje">Broodje</option>
        <option value="patatje">Patatje</option>
        <option value="tapas">Tapas</option>
        <option value="hamburger">Hamburger</option>
        <option value="grieks">Grieks</option>
        <option value="pizza">Pizza</option>
        <option value="pasta">Pasta</option>
        <option value="traiteur">Traiteur</option>
      </select>
      <select id="snackensnoepen" class="dropdownwwjdnonactive hide" name="tag">
        <option disabled selected>Verfijn je keuze</option>
        <option value="snelle snack">Snelle snack</option>
        <option value="snoepen">Snoepen</option>
        <option value="IJsje">IJsje</option>
        <option value="kroketje">Kroketje</option>
        <option value="brammetje">Brammetje</option>
      </select>
      <select id="drankje" class="dropdownwwjdnonactive hide" name="tag">
        <option disabled selected>Verfijn je keuze</option>
        <option value="iets fris">Iets fris</option>
        <option value="thee">Thee</option>
        <option value="koffie">Koffie</option>
        <option value="biertje">Biertje</option>
        <option value="wijntje">Wijntje</option>
        <option value="whiskey">Whiskey</option>
        <option value="cocktail">Cocktail</option>
        <option value="slush">Slush</option>
      </select>
      <select id="evenement" class="dropdownwwjdnonactive hide" name="tag">
        <option disabled selected>Verfijn je keuze</option>
        <option value="in het stadscentrum">In het stadscentrum</option>
        <option value="evenement">Evenement</option>
        <option value="braderie">Braderie</option>
        <option value="rondje dorp">Rondje dorp</option>
      </select>
      <select id="stappen" class="dropdownwwjdnonactive hide" name="tag">
        <option disabled selected>Verfijn je keuze</option>
        <option value="eten">Eten</option>
        <option value="drinken">Drinken</option>
        <option value="theater">Theater</option>
        <option value="danser">Dansen</option>
        <option value="muziek">Muziek</option>
      </select>
      <select id="cultuur" class="dropdownwwjdnonactive hide" name="tag">
        <option disabled selected>Verfijn je keuze</option>
        <option value="kunst">Kunst</option>
        <option value="stadscentrum historie">Stadscentrum historie</option>
        <option value="buitenlandse restaurants">Buitenlandse restaurants</option>
        <option value="cultuur">Cultuur</option>
        <option value="schilderen">Schilderen</option>
        <option value="kunst uitleen">Kunst uitleen</option>
        <option value="uitleen">Uitleen</option>
        <option value="galerie">Galerie</option>
        <option value="workshops">Workshops</option>
      </select>
      <select id="sightseeing" class="dropdownwwjdnonactive hide" name="tag">
        <option disabled selected>Verfijn je keuze</option>
        <option value="architectuur bekijken">Architectuur bekijken</option>
        <option value="de boekenberg">De Boekenberg</option>
        <option value="theater de stoep">Theater de Stoep</option>
        <option value="voorstraat">Voorstraat</option>
        <option value="museum winkel">Museum winkel</option>
      </select>
      <select id="kids" class="dropdownwwjdnonactive hide" name="tag">
        <option disabled selected>Verfijn je keuze</option>
        <option value="speelgoed">Speelgoed</option>
        <option value="speeltuin">Speeltuin</option>
      </select>
      <select id="informatie" class="dropdownwwjdnonactive hide" name="tag">
        <option disabled selected>Verfijn je keuze</option>
        <option value="parkeren">Parkeren</option>
        <option value="naar de wc">Naar de wc</option>
        <option value="plattegrond bekijken">Plattegrond bekijken</option>
        <option value="koopzondagen">Koopzondagen</option>
        <option value="toezicht en beveiliging">Toezicht en beveiliging</option>
      </select>
      <br>
      <input type="submit" class="wwjdbutton" name="button" value="Bekijk resultaten">
      <!-- <button type="button"  name="button">Bekijk resultaten</button> -->
    </form>

I tried to disable the button from the start and enable it on change, but that does not work because when shoppen is selected the code stops working.

shoppen 也是需要一直启用按钮的选项。

我该如何解决这个问题？

Answer 1

如果我没理解错的话，提交按钮应该始终处于禁用状态，并且仅在这些情况下才处于事件状态:

• 在第一个下拉菜单中选择“shoppen”时
• 当为任何其他下拉菜单选择了与默认选项不同的选项时

您可以做的一件事是，当第一个 select 值更改时，自动禁用该按钮，并且仅当该 select 的值为 shoppen 时才启用它.

  // hide the button by default on change
  var $button = $("[type=submit]");
  $button.prop("disabled", true);
  // only enable it if the selected option is shoppen
  if (value === "shoppen") {
    $button.prop("disabled", false);
  }

此外，当每个其他 select 都显示在下面的条件中时，您将第一个选项(不可选择且无效的)标记为已选中.这样，如果用户选择和选择，返回到另一个，然后返回到同一个，则逻辑将被强制执行:

// move to the first disabled option to force selection
$(placesLists[value]).find("option:first-child()").prop("selected", true); 

最后，为所有不是第一个/主要的 select 添加一个更改事件处理程序，如果所选选项不为空(第一个)则启用按钮:

// when a select different than the first one is changed
$('select:not([name=watwiljedoen])').change(function() {
  //get current value
  var value = $(this).val();

  // disable the button by default
  var $button = $("[type=submit]");
  $button.prop("disabled", true);

  // enable the button if the value is not null
  if (value != null) {
    $button.prop("disabled", false);
  }
});

加上 disabled 属性默认禁用按钮。

这是包含这 3 处更改的代码:

// linking values to dropdowns
var placesLists = {
  'uiteten': '#uiteten',
  'snackensnoepen': '#snackensnoepen',
  'drankje': '#drankje',
  'evenement': '#evenement',
  'stappen': '#stappen',
  'cultuur': '#cultuur',
  'sightseeing': '#sightseeing',
  'kids': '#kids',
  'informatie': '#informatie',
};

$('select[name=watwiljedoen]').change(function() {
  //hide all extra lists
  $('.hide').hide().prop("disabled", true);
  $('#disabledselect').hide();

  //get current value
  var value = $(this).val();
  
  // hide the button by default on change
  var $button = $("[type=submit]");
  $button.prop("disabled", true);
  // only enable it if the selected option is shoppen
  if (value === "shoppen") {
    $button.prop("disabled", false);
  }
  
  //if there is a list for this value, show it
  if (value in placesLists) {
    $(placesLists[value]).show().prop("disabled", false);
    $(placesLists[value]).removeClass('dropdownwwjdnonactive');
    $(placesLists[value]).addClass('dropdownwwjd');
    $(placesLists[value]).find("option:first-child()").prop("selected", true); // move to the first disabled option to force selection
  }
});

// when a select different than the first one is changed
$('select:not([name=watwiljedoen])').change(function() {
  //get current value
  var value = $(this).val();
  
  // disable the button by default
  var $button = $("[type=submit]");
  $button.prop("disabled", true);
  
  // enable the button if the value is not null
  if (value != null) {
    $button.prop("disabled", false);
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form class="" action="wat-wil-je-doen" role="form" method="post">
      <select class="dropdownwwjd" name="watwiljedoen">
        <option value="lorem" disabled selected>Wat wil je gaan doen?</option>
        <option value="shoppen">Shoppen</option>
        <option value="uiteten">Uit eten</option>
        <option value="snackensnoepen">Snacken / snoepen</option>
        <option value="drankje">Drankje doen</option>
        <option value="evenement">Evenementen bezoeken</option>
        <option value="stappen">Stappen</option>
        <option value="cultuur">Cultuur snuiven</option>
        <option value="sightseeing">Sightseeing</option>
        <option value="kids">Kids</option>
        <option value="informatie">Meer informatie</option>
      </select>
      <select id="disabledselect" class="dropdownwwjdnonactive" disabled>
        <option value="sdgsdg">Verfijn je keuze</option>
      </select>
      <select id="uiteten" class="dropdownwwjdnonactive hide" name="tag">
        <option disabled selected>Verfijn je keuze</option>
        <option value="ontbijt">Ontbijt</option>
        <option value="lunch">Lunch</option>
        <option value="diner">Diner</option>
        <option value="vis">Vis</option>
        <option value="vlees">Vlees</option>
        <option value="broodje">Broodje</option>
        <option value="patatje">Patatje</option>
        <option value="tapas">Tapas</option>
        <option value="hamburger">Hamburger</option>
        <option value="grieks">Grieks</option>
        <option value="pizza">Pizza</option>
        <option value="pasta">Pasta</option>
        <option value="traiteur">Traiteur</option>
      </select>
      <select id="snackensnoepen" class="dropdownwwjdnonactive hide" name="tag">
        <option disabled selected>Verfijn je keuze</option>
        <option value="snelle snack">Snelle snack</option>
        <option value="snoepen">Snoepen</option>
        <option value="IJsje">IJsje</option>
        <option value="kroketje">Kroketje</option>
        <option value="brammetje">Brammetje</option>
      </select>
      <select id="drankje" class="dropdownwwjdnonactive hide" name="tag">
        <option disabled selected>Verfijn je keuze</option>
        <option value="iets fris">Iets fris</option>
        <option value="thee">Thee</option>
        <option value="koffie">Koffie</option>
        <option value="biertje">Biertje</option>
        <option value="wijntje">Wijntje</option>
        <option value="whiskey">Whiskey</option>
        <option value="cocktail">Cocktail</option>
        <option value="slush">Slush</option>
      </select>
      <select id="evenement" class="dropdownwwjdnonactive hide" name="tag">
        <option disabled selected>Verfijn je keuze</option>
        <option value="in het stadscentrum">In het stadscentrum</option>
        <option value="evenement">Evenement</option>
        <option value="braderie">Braderie</option>
        <option value="rondje dorp">Rondje dorp</option>
      </select>
      <select id="stappen" class="dropdownwwjdnonactive hide" name="tag">
        <option disabled selected>Verfijn je keuze</option>
        <option value="eten">Eten</option>
        <option value="drinken">Drinken</option>
        <option value="theater">Theater</option>
        <option value="danser">Dansen</option>
        <option value="muziek">Muziek</option>
      </select>
      <select id="cultuur" class="dropdownwwjdnonactive hide" name="tag">
        <option disabled selected>Verfijn je keuze</option>
        <option value="kunst">Kunst</option>
        <option value="stadscentrum historie">Stadscentrum historie</option>
        <option value="buitenlandse restaurants">Buitenlandse restaurants</option>
        <option value="cultuur">Cultuur</option>
        <option value="schilderen">Schilderen</option>
        <option value="kunst uitleen">Kunst uitleen</option>
        <option value="uitleen">Uitleen</option>
        <option value="galerie">Galerie</option>
        <option value="workshops">Workshops</option>
      </select>
      <select id="sightseeing" class="dropdownwwjdnonactive hide" name="tag">
        <option disabled selected>Verfijn je keuze</option>
        <option value="architectuur bekijken">Architectuur bekijken</option>
        <option value="de boekenberg">De Boekenberg</option>
        <option value="theater de stoep">Theater de Stoep</option>
        <option value="voorstraat">Voorstraat</option>
        <option value="museum winkel">Museum winkel</option>
      </select>
      <select id="kids" class="dropdownwwjdnonactive hide" name="tag">
        <option disabled selected>Verfijn je keuze</option>
        <option value="speelgoed">Speelgoed</option>
        <option value="speeltuin">Speeltuin</option>
      </select>
      <select id="informatie" class="dropdownwwjdnonactive hide" name="tag">
        <option disabled selected>Verfijn je keuze</option>
        <option value="parkeren">Parkeren</option>
        <option value="naar de wc">Naar de wc</option>
        <option value="plattegrond bekijken">Plattegrond bekijken</option>
        <option value="koopzondagen">Koopzondagen</option>
        <option value="toezicht en beveiliging">Toezicht en beveiliging</option>
      </select>
      <br>
      <input type="submit" class="wwjdbutton" name="button" value="Bekijk resultaten" disabled>
      <!-- <button type="button"  name="button">Bekijk resultaten</button> -->
    </form>