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

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

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

$(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'속성이 있는지 확인하십시오

파일 입력 필드에 대한 솔루션은 다음과 같습니다. .

파일을 선택하지 않은 경우 파일 필드에 대해 제출 단추를 비활성화하려면 사용자가 업로드 할 파일을 선택한 후 활성화하십시오.

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

다음과 같은 것을 사용할 수도 있습니다.

$(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 () 사용) 인 경우 비활성화 된 속성을 제거 / 추가 한 후 올바른 클래스가 추가 / 제거되도록 버튼 상태를 새로 고쳐야합니다.

$( ".selector" ).button( "refresh" );

위의 답변에서는 메뉴 기반 잘라 내기 / 붙여 넣기 이벤트를 확인하지 않습니다. 아래는 두 가지를 모두 수행하는 데 사용되는 코드입니다. 잘라 내기 및 과거 이벤트는 변경이 발생하기 전에 실제로 발생하므로 시간 초과로 인해 작업이 실제로 발생하므로 시간 초과로 인해 시간이 조금 걸립니다.

$( ".your-input-item" ).bind('keyup cut paste',function() {
    var ctl = $(this);
    setTimeout(function() {
        $('.your-submit-button').prop( 'disabled', $(ctl).val() == '');
    }, 100);
});

바닐라 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 양식에 키업 이벤트를 추가하고 모든 키를 누를 때마다 모든 입력 필드를 확인하십시오. 하나 이상의 입력 필드가 비어 있거나 공백 문자 만 포함하는 경우 true 값을 disabled 변수에 할당하고 제출 버튼을 비활성화합니다.

모든 필수 입력 필드가 채워질 때까지 제출 버튼을 비활성화해야하는 경우 : 바꾸기 :

inputs.forEach(function(input, index) {

와:

required_inputs.forEach(function(input, index) {

여기서 required_inputs는 필수 입력 필드 만 포함하는 이미 선언 된 배열입니다.

우리는 단순히 & else이면 할 수 있습니다. 입력이 비어 있다고 가정하면

if($(#name).val() != '') {
   $('input[type="submit"]').attr('disabled' , false);
}

그렇지 않으면 거짓을 참으로 바꿀 수 있습니다

비활성화 : $('input[type="submit"]').prop('disabled', true);

사용 : $('input[type="submit"]').removeAttr('disabled');

위의 활성화 코드는 다음보다 더 정확합니다.

$('input[type="submit"]').removeAttr('disabled');

두 가지 방법을 모두 사용할 수 있습니다.

나는 이것을 사용 사례에 맞추기 위해 약간의 노력을 기울여야했다.

제출하기 전에 모든 필드에 값이 있어야하는 양식이 있습니다.

내가 한 일은 다음과 같습니다.

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

여기에 답변을 주신 모든 분들께 감사드립니다.

제출 버튼을 활성화 또는 비활성화하려면 아래 코드를 참조하십시오

이름 및 도시 필드에 값이 있으면 제출 단추 만 사용 가능합니다.

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

내 프로젝트 에서이 스 니펫을 살펴보십시오.

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

작업이 실행 된 후 버튼을 비활성화했습니다.

$(this).attr('disabled', 'disabled');

Al 유형의 솔루션이 제공됩니다. 그래서 다른 솔루션을 시도하고 싶습니다. id입력 필드에 속성 을 추가하면 더 쉽습니다 .

<input type="text" name="textField" id="textField"/>
<input type="submit" value="send" id="submitYesNo"/>

이제 여기 있습니다 jQuery

$("#textField").change(function(){
  if($("#textField").val()=="")
    $("#submitYesNo").prop('disabled', true)
  else
    $("#submitYesNo").prop('disabled', false)
});

아래 코드가 누군가를 도울 것입니다 .. !!! :)

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*/