Select2：如果所有非可选选择框都有选择，则从提交按钮中删除禁用属性答案

【问题标题】：Select2: remove disabled attribute from submit button if all non-optional select boxes have selectionsSelect2：如果所有非可选选择框都有选择，则从提交按钮中删除禁用属性
【发布时间】：2016-06-14 18:10:11
【问题描述】：

我正在使用 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>

这里有一个JSFiddle，如果你想玩的话。

【问题讨论】：

标签： javascript jquery select2

【解决方案1】：

您为什么不尝试使用$('input[type="submit"]').prop('disabled',false) 启用提交按钮本身。如果只想在更改最后一个下拉菜单时定位它，则可以使用 $('select:last-of-type') 之类的东西。您还可以使用function()在其中添加任何逻辑

【讨论】：

【解决方案2】：

您可以计算正确的选择，当一切正常时启用提交。

$(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);
  });
});

【讨论】：