jQuery 비활성화 / 활성화 제출 버튼
이 HTML이 있습니다.
<input type="text" name="textField" />
<input type="submit" value="send" />
다음과 같이 어떻게 할 수 있습니까?
- 텍스트 필드가 비어 있으면 제출을 비활성화해야합니다 (disabled = "disabled").
- 비활성화 된 속성을 제거하기 위해 텍스트 필드에 무언가를 입력 할 때.
- 텍스트 필드가 다시 비워지면 (텍스트가 삭제됨) 제출 버튼을 다시 비활성화해야합니다.
나는 다음과 같이 시도했다.
$(document).ready(function(){
$('input[type="submit"]').attr('disabled','disabled');
$('input[type="text"]').change(function(){
if($(this).val != ''){
$('input[type="submit"]').removeAttr('disabled');
}
});
});
… 그러나 작동하지 않습니다. 어떤 아이디어?
문제는 포커스가 입력에서 멀어 질 때만 변경 이벤트가 발생한다는 것입니다 (예 : 누군가가 입력을 클릭하거나 탭에서 빠져 나옴). 대신 keyup을 사용해보십시오.
$(document).ready(function() {
$(':input[type="submit"]').prop('disabled', true);
$('input[type="text"]').keyup(function() {
if($(this).val() != '') {
$(':input[type="submit"]').prop('disabled', false);
}
});
});
$(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");
}
}
이 질문은 2 년이 지났지 만 여전히 좋은 질문이며 첫 번째 Google 결과였습니다 ... 그러나 기존의 모든 답변 은 HTML 속성 (removeAttr ( "disabled")) "disabled"를 설정하고 제거 하는 것이 좋습니다. 올바른 접근 방식. 속성 대 속성에 대해 많은 혼란이 있습니다.
HTML
<input type="button" disabled>마크 업 의 "사용 안함" 은 W3C 에서 부울 속성 이라고합니다 .
HTML 대 DOM
인용문:
속성은 DOM에 있습니다. 속성은 DOM으로 구문 분석되는 HTML에 있습니다.
https://stackoverflow.com/a/7572855/664132
JQuery
관련 :
그럼에도 불구하고 확인 된 속성에 대해 기억해야 할 가장 중요한 개념은 확인 된 속성과 일치하지 않는다는 것입니다. 속성은 실제로 defaultChecked 속성에 대응하고, 초기 값으로 설정하기 만 표기 체크 박스의이. 확인 된 속성 값은 확인란의 상태에 따라 변경되지 않지만 확인 된 속성은 변경됩니다. 따라서 확인란이 선택되었는지 확인하는 브라우저 간 호환 방법은 속성을 사용하는 것입니다.
관련된:
속성은 일반적으로 직렬화 된 HTML 속성을 변경하지 않고 DOM 요소의 동적 상태에 영향을줍니다. 예로는 입력 요소의 값 속성, 입력 및 버튼 의 비활성화 된 속성 또는 체크 박스의 체크 속성이 있습니다. .attr () 메서드 대신 .prop () 메서드를 사용하여 비활성화 및 검사를 설정해야합니다.
$( "input" ).prop( "disabled", false );
요약
양식 요소의 [...] 비활성화 상태와 같은 DOM 속성을 [...] 변경하려면 .prop () 메서드를 사용합니다 .
( http://api.jquery.com/attr/ )
질문의 변경시 비활성화 부분에 대해서는 "입력"이라는 이벤트가 있지만 브라우저 지원이 제한 되고 jQuery 이벤트가 아니므로 jQuery가 작동하지 않습니다. 변경 이벤트는 안정적으로 작동하지만 요소가 포커스를 잃으면 시작됩니다. 따라서 둘을 결합 할 수 있습니다 (어떤 사람들은 키업 및 붙여 넣기도 듣습니다).
내가 의미하는 바를 보여주는 테스트되지 않은 코드는 다음과 같습니다.
$(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);
});
});
비활성화 된 속성 사용을 제거하려면
$("#elementID").removeAttr('disabled');
비활성화 된 속성 사용을 추가하려면
$("#elementID").prop("disabled", true);
즐겨 :)
또는 모든 사소한 일에 jQ를 사용하고 싶지 않은 우리를 위해 :
document.getElementById("submitButtonId").disabled = true;
eric, 사용자가 텍스트를 입력 한 다음 모든 텍스트를 삭제할 때 귀하의 코드가 작동하지 않는 것 같습니다. 누군가가 같은 문제를 겪으면 다른 버전을 만들었습니다. 여기 여러분들갑니다 :
$('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');
}
})
다음은 파일 입력 필드에 대한 솔루션입니다 .
파일이 선택되지 않은 경우 파일 필드에 대한 제출 버튼을 비활성화 한 다음 사용자가 업로드 할 파일을 선택한 후 활성화하려면 :
$(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 %>
다음과 같이 작동합니다.
$('input[type="email"]').keyup(function() {
if ($(this).val() != '') {
$(':button[type="submit"]').prop('disabled', false);
} else {
$(':button[type="submit"]').prop('disabled', true);
}
});
HTML에 'disabled'속성이 있는지 확인하십시오.
다음과 같이 사용할 수도 있습니다.
$(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);
}
});
});
여기 라이브 예제입니다
양식 로그인 :
<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);
}
});
});
버튼 자체가 jQuery 스타일 버튼 (.button () 포함) 인 경우 disabled 속성을 제거 / 추가 한 후 올바른 클래스가 추가 / 제거되도록 버튼의 상태를 새로 고쳐야합니다.
$( ".selector" ).button( "refresh" );
위의 답변은 메뉴 기반 잘라 내기 / 붙여 넣기 이벤트 확인도 다루지 않습니다. 다음은 두 가지를 모두 수행하는 데 사용하는 코드입니다. 변경 사항이 발생하기 전에 잘라 내기 및 과거 이벤트가 실제로 발생하기 때문에 작업은 실제로 타임 아웃과 함께 발생하므로 타임 아웃이 발생하는 데 약간의 시간을 제공합니다.
$( ".your-input-item" ).bind('keyup cut paste',function() {
var ctl = $(this);
setTimeout(function() {
$('.your-submit-button').prop( 'disabled', $(ctl).val() == '');
}, 100);
});
우리는 단순히 if & else를 가질 수 있습니다. 입력이 비어 있다고 가정하면
if($(#name).val() != '') {
$('input[type="submit"]').attr('disabled' , false);
}
그렇지 않으면 거짓을 참으로 바꿀 수 있습니다
바닐라 JS 솔루션. 하나의 입력뿐만 아니라 전체 형식에 대해 작동합니다.
문제에서 자바 스크립트 태그를 선택했습니다.
HTML 양식 :
var form = document.querySelector('form')
var inputs = form.querySelectorAll('input')
var required_inputs = form.querySelectorAll('input[required]')
var register = document.querySelector('input[type="submit"]')
form.addEventListener('keyup', function(e) {
var disabled = false
inputs.forEach(function(input, index) {
if (input.value === '' || !input.value.replace(/\s/g, '').length) {
disabled = true
}
})
if (disabled) {
register.setAttribute('disabled', 'disabled')
} else {
register.removeAttribute('disabled')
}
})<form action="/signup">
<div>
<label for="username">User Name</label>
<input type="text" name="username" required/>
</div>
<div>
<label for="password">Password</label>
<input type="password" name="password" />
</div>
<div>
<label for="r_password">Retype Password</label>
<input type="password" name="r_password" />
</div>
<div>
<label for="email">Email</label>
<input type="text" name="email" />
</div>
<input type="submit" value="Signup" disabled="disabled" />
</form>몇 가지 설명 :
이 코드에서 우리는 html 양식에 keyup 이벤트를 추가하고 모든 키 누름에서 모든 입력 필드를 확인합니다. 하나 이상의 입력 필드가 비어 있거나 공백 문자 만 포함하면 비활성화 된 변수에 참 값을 할당하고 제출 버튼을 비활성화합니다.
모든 필수 입력 필드가 채워질 때까지 제출 버튼을 비활성화해야하는 경우-다음을 교체하십시오.
inputs.forEach(function(input, index) {
와:
required_inputs.forEach(function(input, index) {
여기서 required_inputs는 필수 입력 필드 만 포함하는 이미 선언 된 배열입니다.
내 사용 사례에 맞도록 약간 작업해야했습니다.
제출하기 전에 모든 필드에 값이 있어야하는 양식이 있습니다.
내가 한 일은 다음과 같습니다.
$(document).ready(function() {
$('#form_id button[type="submit"]').prop('disabled', true);
$('#form_id input, #form_id select').keyup(function() {
var disable = false;
$('#form_id input, #form_id select').each(function() {
if($(this).val() == '') { disable = true };
});
$('#form_id button[type="submit"]').prop('disabled', disable);
});
});
여기에 답변 해 주신 모든 분들께 감사드립니다.
Please see the below code to enable or disable Submit button
If Name and City fields has value then only Submit button will be enabled.
<script>
$(document).ready(function() {
$(':input[type="submit"]').prop('disabled', true);
$('#Name').keyup(function() {
ToggleButton();
});
$('#City').keyup(function() {
ToggleButton();
});
});
function ToggleButton() {
if (($('#Name').val() != '') && ($('#City').val() != '')) {
$(':input[type="submit"]').prop('disabled', false);
return true;
} else {
$(':input[type="submit"]').prop('disabled', true);
return false;
}
} </script><form method="post">
<div class="row">
<div class="col-md-4">
<h2>Getting started</h2>
<fieldset>
<label class="control-label text-danger">Name</label>
<input type="text" id="Name" name="Name" class="form-control" />
<label class="control-label">Address</label>
<input type="text" id="Address" name="Address" class="form-control" />
<label class="control-label text-danger">City</label>
<input type="text" id="City" name="City" class="form-control" />
<label class="control-label">Pin</label>
<input type="text" id="Pin" name="Pin" class="form-control" />
<input type="submit" value="send" class="btn btn-success" />
</fieldset>
</div>
</div>
</form>Disable: $('input[type="submit"]').prop('disabled', true);
Enable: $('input[type="submit"]').removeAttr('disabled');
The above enable code is more accurate than:
$('input[type="submit"]').removeAttr('disabled');
You can use both methods.
take look at this snippet from my project
$("input[type="submit"]", "#letter-form").on("click",
function(e) {
e.preventDefault();
$.post($("#letter-form").attr('action'), $("#letter-form").serialize(),
function(response) {// your response from form submit
if (response.result === 'Redirect') {
window.location = response.url;
} else {
Message(response.saveChangesResult, response.operation, response.data);
}
});
$(this).attr('disabled', 'disabled'); //this is what you want
so just disabled the button after your operation executed
$(this).attr('disabled', 'disabled');
Al types of solution are supplied. So I want to try for a different solution. Simply it will be more easy if you add a id attribute in your input fields.
<input type="text" name="textField" id="textField"/>
<input type="submit" value="send" id="submitYesNo"/>
Now here is your jQuery
$("#textField").change(function(){
if($("#textField").val()=="")
$("#submitYesNo").prop('disabled', true)
else
$("#submitYesNo").prop('disabled', false)
});
I Hope below code will help someone ..!!! :)
jQuery(document).ready(function(){
jQuery("input[type=submit]").prop('disabled', true);
jQuery("input[name=textField]").focusin(function(){
jQuery("input[type=submit]").prop('disabled', false);
});
jQuery("input[name=textField]").focusout(function(){
var checkvalue = jQuery(this).val();
if(checkvalue!=""){
jQuery("input[type=submit]").prop('disabled', false);
}
else{
jQuery("input[type=submit]").prop('disabled', true);
}
});
}); /*DOC END*/
참고URL : https://stackoverflow.com/questions/1594952/jquery-disable-enable-submit-button
'developer tip' 카테고리의 다른 글
| node.js에서 Base64 인코딩을 수행하는 방법은 무엇입니까? (0) | 2020.09.29 |
|---|---|
| 엄격한 앨리어싱 규칙은 무엇입니까? (0) | 2020.09.29 |
| Maven Snapshot은 정확히 무엇이며 왜 필요한가요? (0) | 2020.09.29 |
| 모든 com.android.support 라이브러리는 정확히 동일한 버전 사양을 사용해야합니다. (0) | 2020.09.29 |
| 식별 관계와 비 식별 관계의 차이점은 무엇입니까? (0) | 2020.09.29 |