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

810

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?

kmunky
źródło
2
Nie używaj removeAttr („disabled”) w ten sposób. Użyj prop (), aby przełączyć stan. Zobacz moją odpowiedź lub oficjalną dokumentację .
podstawowy6

Odpowiedzi:

1193

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);
        }
     });
 });
Eric Palakovich Carr
źródło
2
ok, ale problem polega na tym, że kiedy usuwam ostatnią literę, muszę jeszcze raz nacisnąć, aby uchwycić pustą wartość i wyłączyć mój przycisk, ponieważ po naciśnięciu klawisza Backspace, aby usunąć ostatnią literę, moje pole jest nadal wypełnione, więc moje naciśnięcie klawisza jest przechwytywany, a następnie list jest usuwany. więc ... jak mam to zrobić dobrze?
kmunky,
1
Przepraszam, że najpierw nie testowałem kodu. Czy zastąpienie naciśnięcia klawisza klawiszem pomoże?
Eric Palakovich Carr
4
Co się stanie, jeśli zmienisz wartość pola bez użycia klawiatury?
Nathan
1
To działa, ale wydaje się pomijać css. Na przykład wywołanie $ („# loginButton”). Button (); na input id="loginButton" type="submit" name="Submit" value="Login" disabled>pokaże niepełnosprawnego przycisk z CSS klas niepełnosprawnych.
Gaʀʀʏ
39
Należy zastosować metodę prop („disabled”, true) w stosunku do metody attr („disabled”, „disabled”), patrz dokumentacja na prop ()
Martin
129
$(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");
  }
}
Cletus
źródło
4
tak to działa! ale .. jedno pytanie ... czy możesz to wyjaśnić: $ (": text"). keypress (check_submit) .each (function () {check_submit ();}); dzięki
kmunky,
1
Problem polega na tym, że zdarzenie naciśnięcia klawisza jQuery nie uruchamia się konsekwentnie po naciśnięciu klawisza Backspace lub Delete. Oznacza to, że użytkownik może wycofać tekst, a funkcja nie zostanie wywołana, co jest błędem UX. Widzę keyup jako środek, którego używa większość ludzi. Nie bardzo mi się to podoba; Chcę, aby informacje zwrotne pojawiły się podczas keydown, ale trochę trudno jest to zrobić.
BobRodes,
79

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);
    });
});
podstawowy 6
źródło
1
Dzięki za te informacje, ale tak naprawdę nie mówi, czy użycie atrybutu spowoduje problem, np. Utratę kompatybilności z różnymi przeglądarkami. Czy użycie atrybutu faktycznie powoduje problem?
ChrisJJ
Głosowałem, ale chciałbym również poznać konkretne przypadki, w których zmiana atrybutu prowadzi do problemów, jak wspomniał @ChrisJJ.
Armfoot
40

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

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

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

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

Cieszyć się :)

Umesh Patil
źródło
35

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

document.getElementById("submitButtonId").disabled = true;
Paweł
źródło
55
To wspaniałe, że jesteś wegetarianką Javascript i wszystko, ale to tak naprawdę nie odpowiedzieć na pytanie w ogóle .
Michelle
6
Ta odpowiedź, otrzymująca 25 głosów pozytywnych, wyjaśnia bardzo gówniany kod, który istnieje na całym świecie: /
o0 '.
26

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');
    }
})
Archie1986
źródło
14

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”

H. Yang
źródło
12

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 %>
cydr
źródło
11

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

Sonu Sindhu
źródło
To jest ten, który działa dla mnie. Testowałem powyższe, ale był z nimi jakiś problem. Dziękuję Sonu!
Geeocode
10

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);
        }
    });
});
zapalenie jelita grubego
źródło
8

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" );
Tom Chamberlain
źródło
3
@The_Black_Smurf Dodałem go na wypadek, gdyby pomógł komuś w przyszłości - jaka szkoda?
Tom Chamberlain
Łał. Przykro nam, że automatyczne odświeżanie jQuery nie działa tutaj. Dzięki!
ChrisJJ
7

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);
});
pełen werwy
źródło
6

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.

Alouani Younes
źródło
6

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

Guvaliour
źródło
4

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.

Dharmendra Patel
źródło
do włączenia wystarczy użyć .prop („disabled”, false);
rahim.nagori
2

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.

ringe
źródło
2

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>

Nitin Khachane
źródło
Żeby być wybrednym, nie powinieneś czekać (przynajmniej) na drugą postać przed włączeniem przycisku? ;-)
Chris Pink
1

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

Basheer AL-MOMANI
źródło
1

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)
});
gdmanandamohon
źródło
-1

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*/
Mehul Soni
źródło