想要禁用我的下一个按钮，直到我的所有选项都使用javascript填充

Question

我有6个下拉菜单，下一个按钮和上一个按钮。 我需要禁用下一个按钮，直到我的6个下拉列表被填满。 在填满所有6滴淹没之后，“下一步”按钮想要启用..

下面的代码是下拉代码：

                        <div class="q_category_details_right">
                            <img class="question_arrow1" src="left_arrow.png" id="firstpointer"/>
                            <div class="q_cell select_boxes margin_bottom_20">
                                <select onchange="currentChange(${jvar_question_number*2 +1}, this)" id="current${jvar_question_number*2 +1}">
                                        <option value=""></option>
                                        <option value="5">5</option>
                                        <option value="4">4</option>
                                        <option value="3">3</option>
                                        <option value="2">2</option>
                                        <option value="1">1</option>
                                        <option value="N">N</option>
                                    </select>

                                <img src="command_active.png" width="10" class="comment" id="imgCurrent${jvar_question_number*2 +1}" onclick="popup(this)"/>

                            </div>                  
                            <div class="q_cell select_boxes">
                               <select id="target${jvar_question_number*2 +1}" disabled="true">
                                        <option value=""></option>
                                        <option value="5">5</option>
                                        <option value="4">4</option>
                                        <option value="3">3</option>
                                        <option value="2">2</option>
                                        <option value="1">1</option>
                                        <option value="N" class="hide">N</option>
                                    </select>

                                <img src="comment_icon.png" width="10" class="comment" id="imgTarget${jvar_question_number*2 +1}" onclick="popup(this)"/>

                            </div>
                            <div class="q_cell select_boxes">
                                <select id="importance${jvar_question_number*2 +1}" disabled="true">
                                       <option value=""></option>
                                        <option value="5">5</option>
                                        <option value="4">4</option>
                                        <option value="3">3</option>
                                        <option value="2">2</option>
                                        <option value="1">1</option>
                                        <option value="N" class="hide">N</option>
                                </select>
                                <img src="comment_icon.png" width="10" class="comment" id="imgImportance${jvar_question_number*2 +1}" onclick="popup(this)"/>
                            </div>

                        </div>
                    </div>
                    <j:if test="${questionsDB.next()}">
                    <div class="questions_content questionlist2" onClick="changeInstruct(2)">
                         <div class="q_category_details_left margin_bottom_20">
                                <div class="display_table padding_left_20">
                                    <div class="left_float">
                                        <p> ${jvar_question_number*2 +2}</p>
                                    </div>
                                    <div class="right_float">
                                        <p>
                                           ${questionsDB.assessment_questions}
                                        </p>
                                    </div>
                                </div>
                            </div>
                        <div class="q_category_details_right">
                            <img style="display:none;" src="left_arrow.png" id="secondpointer" class="question_arrow2"/>
                            <div class="q_cell select_boxes margin_bottom_20">
                              <select onchange="currentChange(${jvar_question_number*2 +2}, this)" id="current${jvar_question_number*2 +2}">
                                        <option value=""></option>
                                        <option value="5">5</option>
                                        <option value="4">4</option>
                                        <option value="3">3</option>
                                        <option value="2">2</option>
                                        <option value="1">1</option>
                                        <option value="N">N</option>
                                    </select>
                                <img src="command_active.png" width="10" class="comment" id="imgCurrent${jvar_question_number*2 +2}" onclick="popup(this)"/>
                            </div>
                            <div class="q_cell select_boxes">
                               <select id="target${jvar_question_number*2 +2}" disabled="true">
                                        <option value=""></option>
                                        <option value="5">5</option>
                                        <option value="4">4</option>
                                        <option value="3">3</option>
                                        <option value="2">2</option>
                                        <option value="1">1</option>
                                        <option value="N" class="hide">N</option>
                                    </select>
                                <img src="comment_icon.png" width="10" class="comment" id="imgTarget${jvar_question_number*2 +2}" onclick="popup(this)"/>
                            </div>
                            <div class="q_cell select_boxes">
                                <select id="importance${jvar_question_number*2 +2}" disabled="true">
                                       <option value=""></option>
                                        <option value="5">5</option>
                                        <option value="4">4</option>
                                        <option value="3">3</option>
                                        <option value="2">2</option>
                                        <option value="1">1</option>
                                        <option value="N" class="hide">N</option>
                                </select>
                                <img src="comment_icon.png" width="10" class="comment" id="imgImportance${jvar_question_number*2 +2}" onclick="popup(this)"/>
                            </div>
                        </div>
                    </div>

按钮ID为“下一步”

Answer 1

$('select').on('change', function(){
    var isEmpty = false;
    $(select).each(function(){
           if(!$(this).val()) {
              isEmpty = true;
           }
    });
    isEmpty ? $('your button id').prop('disabled', true) : $('your button id').prop('disabled', false);
});

Answer 2

您需要将更改事件绑定到选择框并继续检查是否已选择所有这些事件（假设选择方式value != ""）

//bind an change event
$( ".select_boxes select" ).change( function(){

   var allselectboxchecked = true;
   $( ".select_boxes select" ).each( function(){

      if ( $( this ).val() == "" )
      {
         allselectboxchecked = false;
      }

   } );   

   //if all select boxes are selected then enable your button
   if ( allselectboxchecked )
   {
    //enable the button
   }

} );