jQuery wyłącz / włącz przycisk przesyłania

Mam ten kod HTML:

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

Jak mogę zrobić coś takiego:

• Gdy pole tekstowe jest puste, przesyłanie powinno być wyłączone (wyłączone = „wyłączone”).
• Gdy coś zostanie wpisane w polu tekstowym, aby usunąć wyłączony atrybut.
• Jeśli pole tekstowe ponownie stanie się puste (tekst zostanie usunięty), przycisk przesyłania powinien zostać ponownie wyłączony.

Próbowałem czegoś takiego:

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

… Ale to nie działa. Jakieś pomysły?

Problem polega na tym, że zdarzenie zmiany jest uruchamiane tylko wtedy, gdy fokus zostanie odsunięty od wejścia (np. Ktoś kliknie wejście lub kliknie poza nim). Zamiast tego spróbuj użyć klucza:

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

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

HTML

„Wyłączone” w <input type="button" disabled>znacznikach jest nazywane przez W3C atrybutem logicznym .

HTML vs. DOM

Zacytować:

Właściwość znajduje się w DOM; atrybut znajduje się w HTML, który jest analizowany w DOM.

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

JQuery

Związane z:

Niemniej jednak najważniejszą koncepcją, o której należy pamiętać o sprawdzonym atrybucie, jest to, że nie odpowiada on sprawdzonej właściwości. Atrybut faktycznie odpowiada właściwości defaultChecked i powinien być używany tylko do ustawiania wartości początkowej z wyboru. Sprawdzona wartość atrybutu nie zmienia się wraz ze stanem pola wyboru, podczas gdy sprawdzana właściwość zmienia się. Dlatego zgodnym z wieloma przeglądarkami sposobem ustalenia, czy pole wyboru jest zaznaczone, jest użycie właściwości ...

Istotnych:

Właściwości ogólnie wpływają na stan dynamiczny elementu DOM bez zmiany serializowanego atrybutu HTML. Przykłady obejmują właściwość wartości elementów wejściowych, wyłączoną właściwość danych wejściowych i przycisków lub sprawdzoną właściwość pola wyboru. Należy zastosować metodę .prop (), aby ustawić wyłączoną i zaznaczoną zamiast metody .attr ().

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

Podsumowanie

Aby [...] zmienić właściwości DOM, takie jak [...] wyłączony stan elementów formularza, użyj metody .prop () .

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

Co do części dotyczącej wyłączania przy zmianie: zdarzenie o nazwie „wejście”, ale obsługa przeglądarki jest ograniczona i nie jest to zdarzenie jQuery, więc jQuery nie sprawi, że będzie działać. Zdarzenie zmiany działa niezawodnie, ale jest uruchamiane, gdy element traci fokus. Można więc połączyć te dwa elementy (niektóre osoby również słuchają kluczy i wklejają).

Oto niesprawdzony fragment kodu, który pokazuje, 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);
    });
});

Aby usunąć wyłączone użycie atrybutu,

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

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

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

Cieszyć się :)

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

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

eric, twój kod nie działał dla mnie, gdy użytkownik wprowadza tekst, a następnie usuwa cały tekst. utworzyłem inną wersję, jeśli ktoś doświadczył tego samego problemu. proszę, ludzie:

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

Będzie to działać w ten sposób:

$('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 kodzie HTML jest atrybut „wyłączony”

Oto rozwiązanie dla pola wejściowego pliku .

Aby wyłączyć przycisk przesyłania do pliku, gdy plik nie jest wybrany, a następnie włącz go, gdy użytkownik wybierze plik 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 również 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

Aby zalogować się do formularza:

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

Jeśli sam przycisk jest przyciskiem w stylu jQuery (za pomocą .button ()), musisz odświeżyć stan przycisku, aby poprawne klasy były dodawane / usuwane po usunięciu / dodaniu wyłączonego atrybutu.

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

Powyższe odpowiedzi nie dotyczą również sprawdzania zdarzeń wycinania / wklejania opartych na menu. Poniżej znajduje się kod, którego używam do zrobienia obu tych rzeczy. Zauważ, że akcja faktycznie dzieje się z limitem czasu, ponieważ cięcia i przeszłe zdarzenia faktycznie uruchamiają się przed zmianą, więc limit czasu 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);
});

Rozwiązanie Vanilla JS. Działa dla całej formy, a nie tylko jednego wejścia.

W pytaniu wybrany tag JavaScript.

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

Niektóre wyjaśnienia:

W tym kodzie dodajemy zdarzenie keyup w formularzu HTML i przy każdym naciśnięciu klawisza sprawdzamy wszystkie pola wejściowe. Jeśli przynajmniej jedno pole wejściowe, które mamy, jest puste lub zawiera tylko znaki spacji, wówczas przypisujemy prawdziwą wartość wyłączonej zmiennej i wyłączamy przycisk wysyłania.

Jeśli musisz wyłączyć przycisk Prześlij, aż wszystkie wymagane pola wejściowe zostaną wypełnione - zamień:

inputs.forEach(function(input, index) {

z:

required_inputs.forEach(function(input, index) {

gdzie wymagane_wejścia jest już zadeklarowane tablica zawierająca tylko wymagane pola wejściowe.

Możemy po prostu mieć, jeśli & else. Jeśli założymy, że twoje dane wejściowe są puste, możemy to zrobić

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

w przeciwnym razie możemy zmienić fałsz na prawdziwy

Wyłączyć: $('input[type="submit"]').prop('disabled', true);

Włączyć: $('input[type="submit"]').removeAttr('disabled');

Powyższy kod aktywacji jest dokładniejszy niż:

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

Możesz użyć obu metod.

Musiałem trochę popracować, aby dopasować to do mojego przypadku użycia.

Mam formularz, w którym wszystkie pola muszą mieć wartość przed przesł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ękujemy wszystkim za odpowiedzi tutaj.

Sprawdź poniższy kod, aby włączyć lub wyłączyć przycisk Prześlij

Jeśli pola Nazwa i Miasto mają wartość, włączony będzie tylko przycisk Prześlij.

<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 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 właśnie wyłączyłem przycisk po zakończeniu operacji

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

Dostarczone są wszystkie typy rozwiązań. Więc chcę wypróbować inne rozwiązanie. Po prostu łatwiej będzie, jeśli dodasz idatrybut 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)
});

Mam nadzieję, że poniższy kod pomoże komuś .. !!! :)

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