it-swarm-eu.dev

jQuery-Schaltfläche zum Deaktivieren / Aktivieren der Übermittlung

Ich habe dieses HTML:

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

Wie kann ich so etwas machen:

  • Wenn das Textfeld leer ist, sollte der Submit deaktiviert sein (disabled = "disabled").
  • Wenn etwas in das Textfeld eingegeben wird, um das deaktivierte Attribut zu entfernen.
  • Wenn das Textfeld wieder leer wird (der Text wird gelöscht), sollte die Senden-Schaltfläche wieder deaktiviert werden.

Ich habe so etwas ausprobiert:

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

... aber es funktioniert nicht. Irgendwelche Ideen?

762
kmunky

Das Problem besteht darin, dass das Änderungsereignis nur ausgelöst wird, wenn der Fokus von der Eingabe wegbewegt wird (z. B. wenn jemand von der Eingabe abklickt oder Tabulatoren daraus entfernt). Versuchen Sie stattdessen, keyup zu verwenden:

$(document).ready(function() {
     $(':input[type="submit"]').prop('disabled', true);
     $('input[type="text"]').keyup(function() {
        if($(this).val() != '') {
           $(':input[type="submit"]').prop('disabled', false);
        }
     });
 });
1123
$(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");
  }
}
124
cletus

Diese Frage ist 2 Jahre alt, aber es ist immer noch eine gute Frage und es war das erste Google-Ergebnis ... aber alle vorhandenen Antworten empfehlen das Setzen und Entfernen das HTML Attribut ​​( removeAttr ("disabled")) "disabled", was nicht der richtige Ansatz ist. Es gibt eine Menge Verwirrung in Bezug auf Attribut und Eigentum.

HTML

Das "disabled" in <input type="button" disabled> im Markup wird vom W3C als boolesches Attribut bezeichnet .

HTML vs. DOM

Zitat:

Eine Eigenschaft befindet sich im DOM. Ein Attribut befindet sich in dem HTML-Code, der in das DOM geparst wird.

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

JQuery

Verbunden:

Das wichtigste Konzept für das überprüfte Attribut ist jedoch, dass es nicht der überprüften Eigenschaft entspricht. Das Attribut ​​entspricht tatsächlich der Eigenschaft defaultChecked und sollte nur zum Festlegen des Anfangswerts verwendet werden des Kontrollkästchens. Der aktivierte Attributwert ändert sich nicht mit dem Status des Kontrollkästchens, während dies bei der aktivierten Eigenschaft der Fall ist. Die browserübergreifende Methode zum Ermitteln, ob ein Kontrollkästchen aktiviert ist, besteht daher darin, die Eigenschaft ... zu verwenden.

Relevant:

Eigenschaften wirken sich im Allgemeinen auf den dynamischen Status eines DOM-Elements aus, ohne das serialisierte HTML-Attribut zu ändern. Beispiele sind die value-Eigenschaft von Eingabeelementen, die deaktivierte Eigenschaft ​​von Eingaben und Schaltflächen oder die checked-Eigenschaft eines Kontrollkästchens. Die .prop () -Methode sollte anstelle der .attr () -Methode zum Setzen von disabled und checked verwendet werden.

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

Zusammenfassung

...] Um DOM-Eigenschaften wie den deaktivierten [...] Zustand von Formularelementen zu ändern, verwenden Sie die . Prop () -Methode.

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


Was die Deaktivierung beim Ändern betrifft, so lautet der Teil der Frage: Es gibt ein Ereignis namens "input", aber die Browserunterstützung ist begrenzt und es ist kein jQuery-Ereignis, sodass jQuery nicht funktioniert. Das Änderungsereignis funktioniert zuverlässig, wird jedoch ausgelöst, wenn das Element den Fokus verliert. Man könnte also beides kombinieren (manche Leute warten auch auf Keyup und Paste).

Hier ist ein ungetesteter Code, der zeigt, was ich meine:

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

Um deaktivierte Attribute zu entfernen, verwenden Sie

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

und um deaktivierte Attribute hinzuzufügen,

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

Genießen :)

37
Umesh Patil

oder für uns, die jQ nicht für jede Kleinigkeit verwenden möchten:

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

eric, Ihr Code schien bei mir nicht zu funktionieren, wenn der Benutzer Text eingibt und dann den gesamten Text löscht. Ich habe eine andere Version erstellt, wenn jemand das gleiche Problem hatte. Hier, Leute:

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

Hier ist die Lösung für Dateieingabefeld.

So deaktivieren Sie eine Senden-Schaltfläche für ein Dateifeld, wenn eine Datei nicht ausgewählt ist:

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

Es wird so funktionieren:

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

Stellen Sie sicher, dass Ihr HTML-Code ein Attribut "disabled" enthält

12
H. Yang

sie können auch so etwas verwenden:

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

hier ist Live-Beispiel

11
Sonu Sindhu

Für Formularanmeldung:

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

Handelt es sich bei der Schaltfläche selbst um eine Schaltfläche im Stil von jQuery (mit .button ()), müssen Sie den Status der Schaltfläche aktualisieren, damit die richtigen Klassen hinzugefügt/entfernt werden, sobald Sie das deaktivierte Attribut entfernt/hinzugefügt haben.

$( ".selector" ).button( "refresh" );
8
Tom Chamberlain

Die obigen Antworten berücksichtigen nicht auch das Prüfen auf menübasierte Ausschneiden/Einfügen-Ereignisse. Unten ist der Code, mit dem ich beides mache. Beachten Sie, dass die Aktion tatsächlich mit einer Zeitüberschreitung ausgeführt wird, da das Ausschneiden und vergangene Ereignisse tatsächlich ausgelöst werden, bevor die Änderung stattgefunden hat. Daher gibt die Zeitüberschreitung etwas Zeit dafür.

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

Wir können einfach haben, wenn & sonst .wenn Ihre Eingabe leer ist, können wir haben

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

sonst können wir falsch in wahr ändern

6
Ajai

Vanille JS Lösung. Es funktioniert für ein ganzes Formular nicht nur eine Eingabe.

In Frage gestelltes JavaScript-Tag.

HTML-Formular:

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>

Einige Erklärungen:

In diesem Code fügen wir ein Keyup-Ereignis in das HTML-Formular ein und überprüfen bei jedem Tastendruck alle Eingabefelder. Wenn mindestens ein Eingabefeld leer ist oder nur Leerzeichen enthält, weisen wir deaktivierten Variablen den wahren Wert zu und deaktivieren die Schaltfläche zum Senden.

Wenn Sie die Senden-Schaltfläche deaktivieren müssen, bis alle erforderlichen Eingabefelder ausgefüllt sind, ersetzen Sie:

inputs.forEach(function(input, index) {

mit:

required_inputs.forEach(function(input, index) {

dabei ist required_inputs bereits als Array deklariert, das nur erforderliche Eingabefelder enthält.

4
Alouani Younes

Bitte beachten Sie den folgenden Code, um die Schaltfläche "Senden" zu aktivieren oder zu deaktivieren.

Wenn die Felder Name und Stadt einen Wert haben, ist nur die Schaltfläche Senden aktiviert.

<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>
2
Nitin Khachane

Ich musste ein bisschen arbeiten, um das für meinen Anwendungsfall zu machen.

Ich habe ein Formular, in dem alle Felder vor dem Absenden einen Wert haben müssen.

Folgendes habe ich getan:

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

Vielen Dank an alle für ihre Antworten hier.

2
ringe

Deaktivieren: $('input[type="submit"]').prop('disabled', true);

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

Der obige Aktivierungscode ist genauer als:

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

Sie können beide Methoden anwenden.

2

Alle Lösungsarten werden mitgeliefert. Also möchte ich nach einer anderen Lösung suchen. Einfacher wird es, wenn Sie ein id -Attribut in Ihre Eingabefelder einfügen.

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

Hier ist dein jQuery

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

schauen Sie sich diesen Ausschnitt aus meinem Projekt an

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

deaktivieren Sie einfach die Schaltfläche, nachdem Ihre Operation ausgeführt wurde

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

1