未选择选择元素中的第二个选项时禁用按钮

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> 

我尝试从一开始就禁用该按钮，并在更改时启用它，但这不起作用，因为选择了shoppen ，代码将停止工作。

shoppen也是需要始终启用按钮的选项。

我怎样才能解决这个问题？

Answer 1

如果我理解正确，则应始终禁用提交按钮，并且仅在以下情况下可用：

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

您可以做的一件事是，当更改第一个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 s在以下条件下显示时，您将第一个选项（不可选择且无效的选项）标记为已选择。 这样，如果用户选择并选择，然后又回到另一个并返回到相同的逻辑，逻辑将被强制执行：

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

最后，为所有不是第一个/主select添加一个change事件处理程序，如果selected选项不为null（第一个），则启用按钮：

// 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属性。

这是具有这三个更改的代码：

 // 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> 

Answer 2

<select>标签

---

对OP的更改

HTML和CSS

• 当submit事件触发时， <form>会将数据发送到实时测试服务器。

• 来自实时测试服务器的响应将发布到<iframe> 。

• 用的例外select#primary和“虚拟” <select>标签，所有<select>标签具有.secondary ， .hide ，和[name=secondary] 。 默认情况下，它们也是[disabled] 。

• .hide现在非常有用-CSS： .hide {display: none} -使用add/removeClass()而不是hide/show()方法。

• 每个<select>的第一个<option>标记已更改：

   <option value="" selected>...</option> 

  现在，重置<select>标签所需要做的就是：

   $('select').val(''); 

---

jQuery的

• change事件中注册了两种<select>标记： $('#primary')和$('.secondary') 。

• 触发$('#primary') ，将重置所有$('.secondary') ：

   $('.secondary').addClass('hide').prop('disabled', true).val(''); 

• 对象placesLists是不必要的。 通过使用$('#primary')的值，可以动态确定#ID选择器：

   ... var category = $(this).val(); $('#' + category).removeClass('hide').prop('disabled', false).val(''); 

• 在$('.secondary')上发生change事件时触发的回调函数很简单：

    ... if ($(this).val() === '') { $('.send').prop('disabled', true); } else { $('.send').prop('disabled', false); } 

  这样可以确保在尚未选择$('.secondary')时， input[type=submit]按钮被[disabled] 。

---

演示

 <!DOCTYPE html> <html> <head> <style> form, iframe, hr { width: 96% } select { display: inline-block; } #primary { width: 45% } .send { float: right; } .secondary { width: 52%; margin: 0 0 5px 5px } .hide { display: none } hr { clear: both; } </style> </head> <body> <form id="list" action="https://httpbin.org/post" method="post" target='response'> <select id="primary" name="primary"> <option value="" selected>Wat wil je gaan doen?</option> <option value="shop">Shoppen</option> <option value="dining">Uit eten</option> <option value="food">Snacken / snoepen</option> <option value="drink">Drankje doen</option> <option value="events">Evenementen bezoeken</option> <option value="booking">Stappen</option> <option value="culture">Cultuur snuiven</option> <option value="sites">Sightseeing</option> <option value="kids">Kids</option> <option value="info">Meer info</option> </select> <select class="secondary"> <option>Verfijn je keuze</option> </select> <select id="dining" class="hide secondary" name="secondary" disabled> <option value="" 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="food" class="hide secondary" name="secondary" disabled> <option value="" 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="drink" class="hide secondary" name="secondary" disabled> <option value="" 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="events" class="hide secondary" name="secondary" disabled> <option value="" selected>Verfijn je keuze</option> <option value="in het stadscentrum">In het stadscentrum</option> <option value="events">Evenement</option> <option value="braderie">Braderie</option> <option value="rondje dorp">Rondje dorp</option> </select> <select id="booking" class="hide secondary" name="secondary" disabled> <option value="" 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="culture" class="hide secondary" name="secondary" disabled> <option value="" 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="culture">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="sites" class="hide secondary" name="secondary" disabled> <option value="" 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="hide secondary" name="secondary" disabled> <option value="" selected>Verfijn je keuze</option> <option value="speelgoed">Speelgoed</option> <option value="speeltuin">Speeltuin</option> </select> <select id="info" class="hide secondary" name="secondary" disabled> <option value="" 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 class='send' type="submit" value="Bekijk resultaten" disabled> <br> <hr> <iframe name='response'></iframe> </form> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script> $('#primary').on('change', function() { $('.secondary').addClass('hide').prop('disabled', true).val(''); var category = $(this).val(); if (category === 'shop') { $('.send').prop('disabled', false); } else if (category === '') { $('.send').prop('disabled', true); } else { $('#' + category).removeClass('hide').prop('disabled', false).val(''); $('.send').prop('disabled', true); } }); $('.secondary').on('change', function() { if ($(this).val() === '') { $('.send').prop('disabled', true); } else { $('.send').prop('disabled', false); } }); </script> </body> </html>