jQuery Wyłącz/Włącz przycisk Wyślij

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

To pytanie ma 2 lata, ale nadal jest dobre i to był pierwszy wynik Google ... ale wszystkie istniejące odpowiedzi zalecają ustawienie i usunięcie atrybutu HTML (removeAttr("disabled")) "disabled", co nie jest właściwym podejściem. Istnieje wiele nieporozumień dotyczących atrybutu vs. właściwości.

HTML

The "disabled" in <input type="button" disabled> in the markup is called a boolean atrybut by the W3C .

HTML vs. DOM

Cytat:

Właściwość jest w DOM; atrybut jest w HTML, który jest parsowany do DOM.

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

JQuery

Powiązane:

Niemniej jednak najważniejszą koncepcją, o której należy pamiętać, jest to, że atrybut checked nie odpowiada właściwości checked. Atrybut faktycznie odpowiada właściwości defaultChecked i powinien być użyty tylko ustawić wartość początkową pola wyboru. Wartość atrybutu checked nie zmienia się wraz ze stanem pola wyboru, podczas gdy właściwość checked. W związku z tym, aby określić, czy pole wyboru jest zaznaczone, należy użyć właściwości...

Istotne:

Właściwości na ogół wpływają na dynamiczny stan elementu DOM bez zmiany serializowanego atrybutu HTML. Przykłady obejmują właściwość value elementów wejściowych, właściwość disabled wejść i przycisków lub właściwość checkbox. The .metoda prop() powinna być używana do Ustawienia wyłączonego i sprawdzonego zamiast metody .metoda attr ().

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

Podsumowanie

Do [...] zmienić właściwości DOM, takie jak [...] disabled state of form elements, use the .metoda prop().

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

Co do wyłączania przy zmianie części pytania: jest Zdarzenie o nazwie "input", ale obsługa przeglądarki jest ograniczona i nie jest to zdarzenie jQuery, więc jQuery nie będzie działać. Zdarzenie change działa niezawodnie, ale jest wywoływane, gdy element traci ostrość. Więc można połączyć te dwa (niektórzy słuchają również keyup i wklej).

Oto nieprzetestowany fragment kodu, który pokaże co mam na myśli:

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

Lub dla nas, którzy nie lubią używać jQ do każdego drobiazgu:

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

Aby usunąć wyłączone użycie atrybutów,

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

I aby dodać wyłączone użycie atrybutu,

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

Enjoy:)

Eric, Twój kod nie wydaje mi się działać, gdy użytkownik wprowadza tekst, a następnie usuwa cały tekst. stworzyłem inną wersję, jeśli ktoś doświadczył tego samego problemu. here ya go 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');
    }
})

Oto rozwiązanie dla pola wprowadzania pliku .

Aby wyłączyć przycisk Wyślij dla pola plik, gdy plik nie jest wybrany, włącz po wybraniu przez Użytkownika pliku do przesłania:

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

Możesz też użyć czegoś takiego:

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

Oto przykład na żywo

Jeśli sam przycisk jest Przyciskiem w stylu jQuery (with .button()) musisz odświeżyć stan przycisku tak, że poprawne klasy są dodawane / usuwane po usunięciu / dodaniu wyłączonego atrybutu.

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

Powyższe odpowiedzi nie odnoszą się również do sprawdzania zdarzeń cięcia/wklejania opartych na menu. Poniżej znajduje się kod, którego używam do robienia obu. Uwaga akcja dzieje się z timeoutem, ponieważ zdarzenia cut i past uruchamiają się przed zmianą, więc timeout daje na to trochę czasu.

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

Dla formularza login:

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

To będzie działać tak:

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

Upewnij się, że w Twoim HTML

Możemy po prostu mieć if & else .jeśli przypuśćmy, że twoje wejście jest puste, możemy mieć

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

Else we can change false into true

Musiałem trochę popracować, żeby to pasowało do mojego przypadku użycia.

Mam formularz, w którym wszystkie pola muszą mieć wartość przed wysłaniem.

Oto co zrobiłem:

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

Dziękuję wszystkim za odpowiedzi tutaj.

Zobacz poniższy kod, aby włączyć lub Wyłączyć przycisk Submit

Jeśli pola Nazwa i miasto mają wartość, wtedy zostanie włączony tylko przycisk Submit.

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

Spójrz na ten fragment z mojego projektu

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

Więc po prostu wyłącz przycisk po wykonaniu operacji

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

Dostarczane są różne rodzaje roztworu. Więc chcę spróbować innego rozwiązania. Po prostu będzie to łatwiejsze, jeśli dodasz atrybut id w polach wejściowych.

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

Teraz jest Twój jQuery

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