특정 양식의 필드가 채워진 경우 페이지에서 단추 활성화

Question

페이지에 두 개의 양식이 있고 특정 양식의 모든 필드가 채워졌지만 현재 스크립트로 채워져있을 때 양식의 특정 단추를 활성화하려고합니다. 특정 양식 필드를 작성하고 버튼을 작성하지 않는 페이지의 다른 형태의 필드의 나머지 부분은 여전히 ​​

<form method=post id="regis"> 
    <p>Register</p> 
    <p> 
     <input name="username" type="text" id="first_name"> 
     <input name="password" type="text" id="second_name"> 
     <input type="submit" value="register" id="register" disabled> 
    </p> 
</form> 
<p> 
    <label for="textfield"></label> 
    <label for="textfield2"></label> 
</p> 
<form name="form1" method="post" action=""> 
    <p>Login</p> 
    <p> 
     <label for="password2"></label> 
     <input type="text" name="email2" id="textfield2"> 
     <label for="textfield3"></label> 
     <input type="text" name="password2" id="textfield3"> 
     <input type="submit" value="login" id="login2" disabled> 
    </p> 
</form> 

$(document).ready(function() { 
    var $input = $('input:text'), 
     $register = $('#register'); 
    $register.attr('disabled', true); 

    $input.keyup(function() { 
     var trigger = false; 
     $input.each(function() { 
      if (!$(this).val()) { 
       trigger = true; 
      } 
     }); 
     trigger ? $register.attr('disabled', true) : $register.removeAttr('disabled'); 
    }); 
}); 

Answer 1

봅니다 당신은 입력 요소의 값을 확인 할 수 있습니다 입력

$input = $('#regis input:text')

$(document).ready(function() { 
 
    var $input = $('#regis input:text'), 
 
     $register = $('#register'); 
 
    $register.attr('disabled', true); 
 

 
    $input.keyup(function() { 
 
     var trigger = false; 
 
     $input.each(function() { 
 
      if (!$(this).val()) { 
 
       trigger = true; 
 
      } 
 
     }); 
 
     trigger ? $register.attr('disabled', true) : $register.removeAttr('disabled'); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<form method=post id="regis"> 
 
    <p>Register</p> 
 
    <p> 
 
     <input name="username" type="text" id="first_name"> 
 
     <input name="password" type="text" id="second_name"> 
 
     <input type="submit" value="register" id="register" disabled> 
 
    </p> 
 
</form> 
 
<p> 
 
    <label for="textfield"></label> 
 
    <label for="textfield2"></label> 
 
</p> 
 
<form name="form1" method="post" action=""> 
 
    <p>Login</p> 
 
    <p> 
 
     <label for="password2"></label> 
 
     <input type="text" name="email2" id="textfield2"> 
 
     <label for="textfield3"></label> 
 
     <input type="text" name="password2" id="textfield3"> 
 
     <input type="submit" value="login" id="login2" disabled> 
 
    </p> 
 
</form>

Answer 2

당신은 .prop 방법을 사용할 수 있습니다 비활성 상태로 유지됩니다

$(document).ready(function() { 
 
    var $input = $('input:text'), 
 
     $register = $('#register'); 
 

 
    $input.keyup(function() { 
 
    var disable = false; 
 

 
    $input.each(function() { 
 
     // if there is atleast one field that is empty 
 
     // disable it 
 
     if (!$(this).val()) { 
 
     disable = true; 
 
     // terminate the .each loop 
 
     return false; 
 
     } 
 
    }); 
 

 
    $register.prop('disabled', disable); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<form> 
 
    <input tyupe="text"/> 
 
    <input tyupe="text"/> 
 
    <button id="register" disabled>Ok</button> 
 
    </form>

을 더 제한의 jQuery 셀렉터

Answer 3

을 선택합니다. 네가 비어 있지 않으면 단추를 사용 가능하게 설정할 수있다. 은 간단히 추가

if($('#textfield2').val()!='' && $('#textfield3').val()!='') 
{ 
    $('#login2').removeAttr('disabled'); 
} 

이 조각

은 두 번째 형태로 사용할 수 있습니다. 첫 번째 경우에도 마찬가지입니다. 물론 잘 문서화 된 문제이므로 웹을 더 잘 검색 할 수 있습니다. here도 확인하십시오.