我有两个选择下拉菜单和一个按钮。我希望当除了一个选项没有选择第二个选项时禁用该按钮。
当我选择第一个选项时,第二个字段将出现,除了一个选项,该选项只有一个选择元素,因此该按钮必须是可单击的。
// 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);
}
另外,当其他select
s在以下条件下显示时,请将第一个选项(不可选择且无效的选项)标记为已选择。这样,如果用户选择并选择,然后又回到另一个并回到相同的逻辑,逻辑将被强制执行:
// 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] 删除。
我来说两句