我正在使用Select2来设置样式并为我的选择框添加功能。我想强制用户按顺序浏览选择下拉菜单,所以我首先禁用所有选择框然后启用第一个选择框。每次用户进行选择时,下一个选择框都将启用。将有一些可选的选项,所以我想要做的是从提交按钮中删除disabled
属性,如果所有非可选选项都有值,但到目前为止我还没有得到它工作正常。
到目前为止,这是我的代码:
$(function() {
$('select').select2({
placeholder: '- Select -',
});
$('select').prop('disabled', true);
$('select:first-of-type').prop('disabled', false);
$('select').on('select2:select', function(e) {
$(this).nextAll('select').first().prop('disabled', false);
$(this).siblings('select').not('.optional').each(function () {
//console.log($(this).val());
if (!$(this).val()) {
reqSelected = true;
} else {
reqSelected = false;
}
});
console.log(reqSelected);
if (reqSelected === true) {
$(input).prop('disabled', false);
}
});
});

label,select {
display:block;
}
label {
margin-top:20px;
}
label:first-child {
margin-top:0;
}
input {
display:block;
margin-top:20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet"/>
<div clas="form">
<label>1. Select Make</label>
<select>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
<label>2. Select Model</label>
<select>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
<label>3. Select Color (optional)</label>
<select class="optional">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
<input type="submit" disabled />
</div>
&#13;
如果您想要玩它,请JSFiddle。
答案 0 :(得分:0)
为什么不尝试使用$('input[type="submit"]').prop('disabled',false)
启用提交按钮。如果只想在最后一个下拉列表更改时将其作为目标,您可以使用$('select:last-of-type')
之类的内容。您还可以使用function()
答案 1 :(得分:0)
您可以计算正确的选择,当一切正常时,请启用提交。
$(document).ready(function(){
var correctSelections = 0,
requiredSelections = 3; //or whatever you need
$('div.form')on('change', 'select', function(){
if(/*this.is(':correctSelection')*/)
correctSelections++;
else
correctSelections--;
if(correctSelections == requiredSelections)
$('input[type="submit"]').prop('disabled',false);
});
});