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

wan

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

当我选择第一个选项时,第二个字段将出现,除了一个选项,该选项只有一个选择元素,因此该按钮必须是可单击的。

// 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 也是需要始终启用按钮的选项。

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

阿尔瓦罗·蒙托罗

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

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

您可以做的一件事是,当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);
  }

另外,当其他selects在以下条件下显示时,请将第一个选项(不可选择且无效的选项)标记为已选择。这样,如果用户选择并选择,然后又回到另一个并回到相同的逻辑,逻辑将被强制执行:

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

最后,为所有select不是第一个/主对象s添加一个更改事件处理程序,如果所选选项不为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>

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

如何禁用第二个选择选项?

在 Angular 4 中尚未选择第一个选择选项时禁用第二个选择选项

如何在更改第二个选择选项时使用不同的属性

在第二个“选择”部分中选择选项时,该特定选项不会隐藏在第一个“选择”部分中

在selectizeInput中选择第二个时禁用一个选项

如何在 Redux 表单中填充选择选项并过滤 FieldArray 中的第二个选择?

如何根据第一个选择选项显示第二个选择选项

选择选择器的第二个元素

选择JS中的第二个提交按钮

选择数组中的第二个XML元素

jQuery-添加第二个变量以选择选项字段

选择上的下拉菜单按钮禁用第二个下拉菜单选项

汽车选择在选择第二个选项时,没有选项是大于1

选择第二个单选按钮时未选中第一个单选按钮

获得第二个选择选项值后,如果存在第二个选项值,另一个 div 将隐藏

如果选中,则禁用第二个选择框的选项

如果已先选择,则从第二个选择中删除选项

在Dojo中使用第二个选择值来过滤选择中的选项

未选择第二个下拉菜单

选择列表的倒数第二个元素

熊猫分裂并选择第二个元素

选择第二个元素子Java脚本

当第一个按钮和第二个按钮之间存在另一个元素时,如何使用nth-child正确选择第二个按钮?

如果选择了第二个选项,则在文本中传递值

如何从第一个选项卡选择选项卡栏控制器的第二个选项卡?

如何选择jQuery nextUntil中的第二个元素?

如何解析JSON响应中的选择第二个HTML锚元素

在Testcafe中,如何等待相同选择器的第二个元素出现?

如果未选择第一个下拉菜单,则禁用第二个下拉菜单