[javascript] jQuery 비활성화 / 활성화 제출 버튼

JAVASCRIPT / 글쓴이

나는이 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');
        }
    });
});

…하지만 작동하지 않습니다. 어떤 아이디어?

답변

문제는 포커스가 입력에서 멀어 질 때만 변경 이벤트가 발생한다는 것입니다 (예 : 누군가 입력을 클릭하거나 탭을 벗어남). 대신 키업을 사용해보십시오.

$(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

관련 :

그럼에도 불구하고 checked 속성에 대해 기억해야 할 가장 중요한 개념은 checked 속성과 일치하지 않는다는 것입니다. 이 속성은 실제로 defaultChecked 속성에 해당 하며 확인란 의 초기 값을 설정하는 데만 사용해야합니다 . checked 속성 값은 확인란의 상태에 따라 변경되지 않지만 checked 속성은 변경됩니다. 따라서 확인란이 선택되어 있는지 확인하는 브라우저 간 호환 방법은 속성을 사용하는 것입니다.

관련된:

속성은 일반적으로 직렬화 된 HTML 속성을 변경하지 않고 DOM 요소의 동적 상태에 영향을줍니다. 입력 요소의 값 속성, 입력 및 버튼 의 비활성화 된 속성 또는 확인란의 checked 속성을 예로들 수 있습니다 . .attr () 메소드 대신 .prop () 메소드를 사용하여 disabled 및 checked를 설정해야합니다.

$( "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;

답변

에릭, 사용자가 텍스트를 입력 한 다음 모든 텍스트를 삭제할 때 코드가 작동하지 않는 것 같습니다. 누군가 같은 문제가 발생하면 다른 버전을 만들었습니다. 여기 사람들이 간다 :

$('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');
    }
})

답변

다음과 같이 작동합니다.

$('input[type="email"]').keyup(function() {
    if ($(this).val() != '') {
        $(':button[type="submit"]').prop('disabled', false);
    } else {
        $(':button[type="submit"]').prop('disabled', true);
    }
});

HTML에 ‘disabled’속성이 있는지 확인하십시오