[JQUERY] jQuery를 비활성화 / 버튼을 제출 가능
JQUERYjQuery를 비활성화 / 버튼을 제출 가능
해결법
-
1.문제는 그 초점이 상기 입력 (입력 또는 탭 그것을 밖으로 떨어져 예컨대 사람 클릭)으로부터 멀리 이동되는 경우에만 상기 변경 이벤트가 발생. 대신의 keyup를 사용해보십시오 :
문제는 그 초점이 상기 입력 (입력 또는 탭 그것을 밖으로 떨어져 예컨대 사람 클릭)으로부터 멀리 이동되는 경우에만 상기 변경 이벤트가 발생. 대신의 keyup를 사용해보십시오 :
$(document).ready(function() { $(':input[type="submit"]').prop('disabled', true); $('input[type="text"]').keyup(function() { if($(this).val() != '') { $(':input[type="submit"]').prop('disabled', false); } }); }); -
2.
$(function() { $(":text").keypress(check_submit).each(function() { check_submit(); }); }); function check_submit() { if ($(this).val().length == 0) { $(":submit").attr("disabled", true); } else { $(":submit").removeAttr("disabled"); } } -
3.이 질문은 2 세이지만 여전히 좋은 질문과 첫 번째 구글 결과였다 ...하지만 기존의 모든 답변은 설정하지 인 (removeAttr () "해제") "비활성화"는 HTML 속성을 삭제하는 것이 좋습니다 올바른 접근. 속성 대 속성에 대한 많은 혼란이있다.
이 질문은 2 세이지만 여전히 좋은 질문과 첫 번째 구글 결과였다 ...하지만 기존의 모든 답변은 설정하지 인 (removeAttr () "해제") "비활성화"는 HTML 속성을 삭제하는 것이 좋습니다 올바른 접근. 속성 대 속성에 대한 많은 혼란이있다.
의 "비활성" 마크 업에 의해 W3C 부울 특성이라고한다.
인용문:
https://stackoverflow.com/a/7572855/664132
관련 :
관련된:
$( "input" ).prop( "disabled", false );내지 [...] 같은 변경 DOM의 건물 [...] 폼 요소의 비활성 상태의 .prop () 메소드를 사용한다.
(http://api.jquery.com/attr/)
질문의 변경 부분에 대한 해제에 관해서는 :이 "입력"이라는 이벤트이지만, 브라우저 지원이 제한되며 jQuery를가 작동하지 않습니다 그래서, JQuery와 이벤트가 아니다. 변경 이벤트가 안정적으로 작동하지만 요소가 포커스를 잃을 때 발생합니다. 하나는 결합 할 수 있도록 두 (일부 사람들은 또한의 keyup를 수신하고 붙여 넣기).
여기에 내가 무엇을 의미하는지 보여주는 코드의 테스트되지 않은 부분입니다 :
$(document).ready(function() { var $submit = $('input[type="submit"]'); $submit.prop('disabled', true); $('input[type="text"]').on('input change', function() { //'input change keyup paste' $submit.prop('disabled', !$(this).val().length); }); }); -
4.disabled 속성의 사용을 제거하려면,
disabled 속성의 사용을 제거하려면,
$("#elementID").removeAttr('disabled');장애인 속성 사용을 추가,
$("#elementID").prop("disabled", true);즐겨 :)
-
5.여부를 같이 할 것을 우리를 위해하는 모든 작은 일에 대한 JQ를 사용합니다 :
여부를 같이 할 것을 우리를 위해하는 모든 작은 일에 대한 JQ를 사용합니다 :
document.getElementById("submitButtonId").disabled = true; -
6.그런 다음 사용자가 텍스트를 입력하는 모든 텍스트를 삭제할 때 에릭, 당신의 코드는 나를 위해 작동하지 않았다. 사람이 같은 문제가 발생하면 내가 다른 버전을 만들었습니다. 나중에 사람들을 여기 요 :
그런 다음 사용자가 텍스트를 입력하는 모든 텍스트를 삭제할 때 에릭, 당신의 코드는 나를 위해 작동하지 않았다. 사람이 같은 문제가 발생하면 내가 다른 버전을 만들었습니다. 나중에 사람들을 여기 요 :
$('input[type="submit"]').attr('disabled','disabled'); $('input[type="text"]').keyup(function(){ if($('input[type="text"]').val() == ""){ $('input[type="submit"]').attr('disabled','disabled'); } else{ $('input[type="submit"]').removeAttr('disabled'); } }) -
7.그것은 다음과 같이 작동합니다 :
그것은 다음과 같이 작동합니다 :
$('input[type="email"]').keyup(function() { if ($(this).val() != '') { $(':button[type="submit"]').prop('disabled', false); } else { $(':button[type="submit"]').prop('disabled', true); } });있는지 확인 HTML의 '장애인'속성이있다
-
8.여기에 파일 입력 필드에 대한 솔루션입니다.
여기에 파일 입력 필드에 대한 솔루션입니다.
사용자가 업로드 할 파일을 선택 후 무력화에 파일이 선택되지 않은 파일 필드에 버튼을 제출 한 후 수 :
$(document).ready(function(){ $("#submitButtonId").attr("disabled", "disabled"); $("#fileFieldId").change(function(){ $("#submitButtonId").removeAttr("disabled"); }); });HTML :
<%= form_tag your_method_path, :multipart => true do %><%= file_field_tag :file, :accept => "text/csv", :id => "fileFieldId" %><%= submit_tag "Upload", :id => "submitButtonId" %><% end %> -
9.당신은 또한이 같은 것을 사용할 수 있습니다 :
당신은 또한이 같은 것을 사용할 수 있습니다 :
$(document).ready(function() { $('input[type="submit"]').attr('disabled', true); $('input[type="text"]').on('keyup',function() { if($(this).val() != '') { $('input[type="submit"]').attr('disabled' , false); }else{ $('input[type="submit"]').attr('disabled' , true); } }); });여기에 라이브 예입니다
-
10.양식 로그인의 경우 :
양식 로그인의 경우 :
<form method="post" action="/login"> <input type="text" id="email" name="email" size="35" maxlength="40" placeholder="Email" /> <input type="password" id="password" name="password" size="15" maxlength="20" placeholder="Password"/> <input type="submit" id="send" value="Send"> </form>자바 스크립트 :
$(document).ready(function() { $('#send').prop('disabled', true); $('#email, #password').keyup(function(){ if ($('#password').val() != '' && $('#email').val() != '') { $('#send').prop('disabled', false); } else { $('#send').prop('disabled', true); } }); }); -
11.버튼 자체 인 경우 jQuery를 버튼 스타일 (.button와 ()) 올바른 클래스가 / 당신이 제거한 후에 추가 / 제거 장애인 속성을 추가되도록 버튼의 상태를 갱신해야합니다.
버튼 자체 인 경우 jQuery를 버튼 스타일 (.button와 ()) 올바른 클래스가 / 당신이 제거한 후에 추가 / 제거 장애인 속성을 추가되도록 버튼의 상태를 갱신해야합니다.
$( ".selector" ).button( "refresh" ); -
12.대답은 위의 이벤트를 / 붙여 넣기 메뉴를 기반으로 절단 검사도 해결되지 않습니다. 아래는 제가 두 가지를 모두 수행하는 데 사용하는 코드입니다. 변화가 발생하기 전에 잘라 과거의 사건이 실제로 발생하기 때문에 제한 시간이 그렇게 할 수있는 약간의 시간을 제공하므로 작업이 실제로 타임 아웃이 발생합니다.
대답은 위의 이벤트를 / 붙여 넣기 메뉴를 기반으로 절단 검사도 해결되지 않습니다. 아래는 제가 두 가지를 모두 수행하는 데 사용하는 코드입니다. 변화가 발생하기 전에 잘라 과거의 사건이 실제로 발생하기 때문에 제한 시간이 그렇게 할 수있는 약간의 시간을 제공하므로 작업이 실제로 타임 아웃이 발생합니다.
$( ".your-input-item" ).bind('keyup cut paste',function() { var ctl = $(this); setTimeout(function() { $('.your-submit-button').prop( 'disabled', $(ctl).val() == ''); }, 100); }); -
13.바닐라 JS 솔루션. 그것은 전체의 형태뿐만 아니라 하나 개의 입력을 위해 작동합니다.
바닐라 JS 솔루션. 그것은 전체의 형태뿐만 아니라 하나 개의 입력을 위해 작동합니다.
질문에서 자바 스크립트 태그를 선택했습니다.
HTML 형태 :
VAR 형태 document.querySelector = ( '형태') VAR의 입력 form.querySelectorAll = ( '입력') VAR required_inputs form.querySelectorAll = ( '입력 [필수]) VAR 레지스터 document.querySelector = ( '입력 [타입 = "제출"]) form.addEventListener ( '의 keyup', 기능 (E) { VAR 비활성화 = 거짓 inputs.forEach (함수 (입력, 인덱스) { 경우 (input.value === ''||! input.value.replace (/ \ S / g, '') .length) { 장애인 = TRUE } }) 경우 (장애인) { register.setAttribute ( '장애인', '장애인') } 다른 { register.removeAttribute ( '장애인') } })