2017-04-10 106 views
1

这是我的形式它是一个多步骤的形式,当我提出一个步骤,然后按钮启用,并进入下一步,直到表单字段按钮已被禁用。我想选择项目选择按钮已禁用。我怎样才能做到这一点?多步表单按钮禁用,直到表单选择字段

<form action="" method="POST" id="ccSelectForm"> 

    <select name="select-item" class="form-control" id="select_field"> 
      <option value="">Select your option</option> 
      <option value="2">2</option> 
      <option value="3">3</option> 
      <option value="4">4</option> 
      <option value="5">5</option> 
     </select> 
    </div> 
    <div class="btn-continue"> 
     <button type="button" id="register2" class="btn btn-default next-step ">Continue</button>  
    </div> 


    <div id="menu2" class="tab-pane fade"> 
     <div class="tab-form-content"> 
      <h2>What are your <b>overall goals?</b></h2> 
      <div class="bor-bottom"></div> 


       <div class="form-group"> 
        <input type="text" class="form-control" name="name" id="" placeholder="Name"> 
       </div> 
       <div class="form-group"> 
        <input type="email" class="form-control" name="email" id="" placeholder="Email"> 
       </div> 
       <div class="form-group"> 
        <input type="text" class="form-control" id="" name="phone_number" placeholder="Phone number"> 
       </div> 

       <div class="btn-continue"> 
        <button type="submit" name="submit" class="btn btn-default next-step register">Submit</button> 

        <br /> 

        <button type="button" id="register3" class="btn go-back prev-step">Go Back</button> 
       </div> 

     </div> 
    </div> 

</form> 



$(document).ready(function() { 
     $("#register2,#register3").prop("disabled", true); 
     $('#ccSelectForm').validate({ 
      rules: { 
       website: { 
        required: true, 
       }, 
       optionsRadios: { 
        required: true, 
       }, 
       budget: { 
        required: true, 
       }, 
       name: { 
        required: true, 
       }, 
       email: { 
        required: true, 
       }, 
       phone_number: { 
        required: true, 
       } 
       /* inputEmailConfirm: { 
        equalTo: '#inputEmail' 
       } */ 
      } 
     }); 

     $('#ccSelectForm input').on('keyup blur', function() { 
      if ($('#ccSelectForm').valid()) { 
       $("#register2,#register3").prop("disabled", false); 
      } else { 
        $("#register2,#register3").prop("disabled", true); 
      } 
     }); 

    });  

回答

0

开始有残疾人按钮

<button type="button" id="register2" class="btn btn-default next-step " disabled="disabled">Continue</button>

将一个函数在您选择的变化,如果项目选择启用按钮

$(function(){ 
    $('#select_field').change(function(){ 
     var itemVal = $(this).val(); 
     if(itemVal != ''){ 
      $('#register2').removeAttr('disabled'); 
     } 
     else{ 
      $('#register2').attr('disabled', 'disabled'); 
     } 
    }); 
}); 
+0

非常感谢你 – Sakib

相关问题