想要禁用我的下一个按钮，直到使用 JavaScript 填充我的全部选项

want to disable my next button until my all option are filled using javascript

本文关键字：JavaScript 填充 我的全部 选项 我的 下一个 按钮      更新时间：2023-09-26

我有 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 为"下一步"

$('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);
});
您需要

将更改事件绑定到选择框并继续检查是否已选择所有更改事件（假设选择意味着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
   }
} );
相关文章：