텍스트 입력 및 드롭 다운 선택과 함께 제출 버튼을 비활성화하십시오.

Question

모든 필드에 값이있을 때까지 제출 버튼을 비활성화하려고합니다. 전자 메일 및 암호 입력에는 사용할 수 있지만 선택 드롭 다운에는 사용할 수 없습니다.

나는 .keyup()이 드롭 다운에 적용되지 않았기 때문에 코드를 조정하는 방법을 알지 못한다고 생각합니다. 대신 change() 이벤트를 사용해 보았지만 제출 버튼을 완전히 비활성화했습니다.

<form> 
    <input class="disableButton" id="email" type="email" />   
    <input class="disableButton" id="pass" type="password" /> 
    <select id="state" class="selected-state disableButton"> 
     <option value="">State</option> 
     <option value="AL">AL</option> 
     <option value="AK">AK</option> 
     ... 
    </select> 
    <input id="emailPassSubmit" type="button" disabled="disabled" /> 
</form> 

<script> 
$(function() { 
    $('.disableButton').keyup(function() { 
     if ($('#email').val() == '' || $('#pass').val() == '' || $('#state').val() == '') { 
      $('#emailPassSubmit').prop('disabled', true); 
     } else { 
      $('#emailPassSubmit').prop('disabled', false); 
     } 
    }); 
}); 
</script> 

Answer 1

당신은 당신이 요소의 종류에 트리거를 원하는 것 같은 두 keyup() 및 change() 이벤트를 테스트해야합니다. 당신과 같이, 요소 (들)에 여러 이벤트를 연결하는 jQuery의 on() 방법을 사용할 수 있습니다

는 :

$('.disableButton').on('keyup change', function(){ ... 

jsFiddle here

Answer 2

당신은 아래로 선택 드롭에 disableButton 클래스를 추가하는 것을 잊었다. 여기

는 작업 버전 :

이 http://jsbin.com/gonut/1/

Answer 3

선택한 대답은 작동하지만, 우아한 또는 확장 성이 아니다. 각 입력란에 대해 클래스를 추가하는 문제가 발생하더라도 각 입력란은 몇 가지 이유로 하드 코딩됩니다.

대신, 클래스 '.disableButton'각 항목을 통해 단지주기 :

$('.disableButton').on('keyup change', function() { 
    var empty = false; 
    $('.disableButton').each(function() { 
     if ($(this).val() == '') { 
      empty = true; 
     } 
    }); 

    if (empty) { 
     $('#emailPassSubmit').prop('disabled', true); 
    } else { 
     $('#emailPassSubmit').prop('disabled', false); 
    } 
}); 

그냥 클래스 "disableButton"가 (등, 드롭 다운, 텍스트 입력으로 작동) 각 필드가 있는지 확인하십시오. 또한 드롭 다운의 기본값은 ""이어야하며 사용자가 수행해야합니다.

이 방법을 사용하면 미래에 원하는만큼 필드를 추가 할 수 있으며 올바른 클래스가있는 한이 코드를 전혀 건드릴 필요가 없습니다.