jQuery tắt / bật nút gửi

Tôi có HTML này:

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

Làm thế nào tôi có thể làm một cái gì đó như thế này:

• Khi trường văn bản trống, việc gửi sẽ bị vô hiệu hóa (bị vô hiệu hóa = "bị vô hiệu hóa").
• Khi một cái gì đó được gõ vào trường văn bản để loại bỏ thuộc tính bị vô hiệu hóa.
• Nếu trường văn bản trở nên trống một lần nữa (văn bản bị xóa), nút gửi sẽ bị vô hiệu hóa một lần nữa.

Tôi đã thử một cái gì đó như thế này:

$(document).ready(function(){
    $('input[type="submit"]').attr('disabled','disabled');
    $('input[type="text"]').change(function(){
        if($(this).val != ''){
            $('input[type="submit"]').removeAttr('disabled');
        }
    });
});

Sầu nhưng nó không hoạt động. Có ý kiến ​​gì không?

Vấn đề là sự kiện thay đổi chỉ kích hoạt khi tiêu điểm được di chuyển ra khỏi đầu vào (ví dụ: ai đó nhấp vào đầu vào hoặc các tab ra khỏi nó). Thay vào đó, hãy thử sử dụng 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");
  }
}

Câu hỏi này đã được 2 năm nhưng đây vẫn là một câu hỏi hay và đó là kết quả đầu tiên của Google ... nhưng tất cả các câu trả lời hiện tại đều khuyên bạn nên cài đặt và xóa thuộc tính HTML (removeAttr ("bị vô hiệu hóa")), "không bị" cách tiếp cận đúng. Có rất nhiều nhầm lẫn về thuộc tính so với tài sản.

HTML

"Vô hiệu hóa" trong <input type="button" disabled>đánh dấu được W3C gọi là thuộc tính boolean .

HTML so với DOM

Trích dẫn:

Một thuộc tính nằm trong DOM; một thuộc tính có trong HTML được phân tích cú pháp vào DOM.

https://stackoverflow.com/a/7572855/664132

JQuery

Liên quan:

Tuy nhiên, khái niệm quan trọng nhất cần nhớ về thuộc tính được kiểm tra là nó không tương ứng với thuộc tính được kiểm tra. Các thuộc tính thực sự tương ứng với tài sản defaultChecked và nên được sử dụng chỉ để thiết lập các giá trị ban đầu của hộp kiểm. Giá trị thuộc tính được kiểm tra không thay đổi theo trạng thái của hộp kiểm, trong khi thuộc tính được kiểm tra thì không. Do đó, cách tương thích với nhiều trình duyệt để xác định xem hộp kiểm có được chọn hay không là sử dụng thuộc tính ...

Liên quan, thích hợp:

Các thuộc tính thường ảnh hưởng đến trạng thái động của phần tử DOM mà không thay đổi thuộc tính HTML được tuần tự hóa. Ví dụ bao gồm thuộc tính giá trị của các thành phần đầu vào, thuộc tính bị vô hiệu hóa của các đầu vào và nút hoặc thuộc tính được kiểm tra của hộp kiểm. Phương thức .prop () nên được sử dụng để đặt bị vô hiệu hóa và được kiểm tra thay vì phương thức .attr ().

$( "input" ).prop( "disabled", false );

Tóm lược

Để [...] thay đổi các thuộc tính DOM như trạng thái của các phần tử biểu mẫu bị vô hiệu hóa [...], hãy sử dụng phương thức .prop () .

( http://api.jquery.com/attr/ )

Về phần vô hiệu hóa phần thay đổi của câu hỏi: Có một sự kiện gọi là "đầu vào", nhưng hỗ trợ trình duyệt bị hạn chế và đó không phải là sự kiện jQuery, vì vậy jQuery sẽ không làm cho nó hoạt động. Sự kiện thay đổi hoạt động đáng tin cậy, nhưng được kích hoạt khi phần tử mất tiêu điểm. Vì vậy, người ta có thể kết hợp cả hai (một số người cũng nghe keyup và dán).

Đây là một đoạn mã chưa được kiểm tra để thể hiện điều tôi muốn nói:

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

Để loại bỏ sử dụng thuộc tính bị vô hiệu hóa,

 $("#elementID").removeAttr('disabled');

và để thêm sử dụng thuộc tính bị vô hiệu hóa,

$("#elementID").prop("disabled", true);

Thưởng thức :)

hoặc cho chúng tôi rằng không thích sử dụng jQ cho mọi điều nhỏ nhặt:

document.getElementById("submitButtonId").disabled = true;

eric, mã của bạn dường như không hoạt động với tôi khi người dùng nhập văn bản sau đó xóa tất cả văn bản. tôi đã tạo một phiên bản khác nếu bất cứ ai gặp vấn đề tương tự. ở đây ya đi folks:

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

Nó sẽ hoạt động như thế này:

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

Đảm bảo có thuộc tính 'bị vô hiệu hóa' trong HTML của bạn

Đây là giải pháp cho trường nhập tệp .

Để tắt nút gửi cho trường tệp khi tệp không được chọn, sau đó bật sau khi người dùng chọn tệp để tải lên:

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

bạn cũng có thể sử dụng một cái gì đó như thế này:

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

đây là ví dụ trực tiếp

Để đăng nhập mẫu:

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

Javascript:

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

Nếu nút tự nó là nút theo kiểu jQuery (với .button ()), bạn sẽ cần làm mới trạng thái của nút để các lớp chính xác được thêm / xóa sau khi bạn đã xóa / thêm thuộc tính bị vô hiệu hóa.

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

Các câu trả lời ở trên không có địa chỉ cũng kiểm tra các sự kiện cắt / dán dựa trên menu. Dưới đây là mã mà tôi sử dụng để làm cả hai. Lưu ý hành động thực sự xảy ra với thời gian chờ vì các sự kiện cắt và quá khứ thực sự kích hoạt trước khi thay đổi xảy ra, vì vậy thời gian chờ sẽ cho một chút thời gian để điều đó xảy ra.

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

Giải pháp Vanilla JS. Nó hoạt động cho toàn bộ một hình thức không chỉ một đầu vào.

Trong câu hỏi đã chọn thẻ JavaScript.

Mẫu 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>

Một số giải thích:

Trong mã này, chúng tôi thêm sự kiện keyup trên mẫu html và trên mỗi lần nhấn phím kiểm tra tất cả các trường nhập. Nếu ít nhất một trường đầu vào mà chúng ta có trống hoặc chỉ chứa các ký tự khoảng trắng thì chúng ta gán giá trị thực cho biến bị vô hiệu hóa và vô hiệu hóa nút gửi.

Nếu bạn cần tắt nút gửi cho đến khi tất cả các trường nhập yêu cầu được điền vào - thay thế:

inputs.forEach(function(input, index) {

với:

required_inputs.forEach(function(input, index) {

trong đó required_inputs đã được khai báo mảng chỉ chứa các trường đầu vào bắt buộc.

Chúng tôi chỉ đơn giản có thể có nếu & khác. Nếu giả sử đầu vào của bạn trống, chúng tôi có thể có

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

khác chúng ta có thể thay đổi sai thành đúng

Vô hiệu hóa: $('input[type="submit"]').prop('disabled', true);

Cho phép: $('input[type="submit"]').removeAttr('disabled');

Mã kích hoạt ở trên chính xác hơn:

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

Bạn có thể sử dụng cả hai phương pháp.

Tôi đã phải làm việc một chút để làm cho phù hợp với trường hợp sử dụng của tôi.

Tôi có một hình thức mà tất cả các trường phải có giá trị trước khi gửi.

Đây là những gì tôi đã làm:

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

Cảm ơn tất cả mọi người cho câu trả lời của họ ở đây.

Vui lòng xem mã dưới đây để bật hoặc tắt nút Gửi

Nếu các trường Tên và Thành phố có giá trị thì chỉ có nút Gửi sẽ được bật.

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

hãy xem đoạn trích này từ dự án của tôi

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

vì vậy chỉ cần tắt nút sau khi hoạt động của bạn được thực thi

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

Al loại giải pháp được cung cấp. Vì vậy, tôi muốn thử một giải pháp khác. Đơn giản là nó sẽ dễ dàng hơn nếu bạn thêm một idthuộc tính trong các trường đầu vào của bạn.

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

Bây giờ đây là của bạn jQuery

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

Tôi hy vọng dưới đây mã sẽ giúp ai đó .. !!! :)

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