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

Ich habe diesen HTML:

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

Wie kann ich so etwas machen:

• Wenn das Textfeld leer ist, sollte die Übermittlung 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 versucht:

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

Das Problem ist, dass das Änderungsereignis nur ausgelöst wird, wenn der Fokus von der Eingabe wegbewegt wird (z. B. wenn jemand auf die Eingabe klickt oder sie aus den Registerkarten 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);
        }
     });
 });

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

Diese Frage ist 2 Jahre alt, aber es ist immer noch eine gute Frage und es war das erste Google-Ergebnis ... In allen vorhandenen Antworten wird empfohlen , das HTML- Attribut (removeAttr ("disabled")) "disabled" festzulegen und zu entfernen , was nicht der Fall ist der richtige Ansatz. Es gibt viel Verwirrung in Bezug auf Attribut und Eigentum.

HTML

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

HTML vs. DOM

Zitat:

Eine Eigenschaft befindet sich im DOM. Ein Attribut befindet sich im HTML-Code, der im DOM analysiert 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 Anfangswertes des Kontrollkästchens verwendet werden. Der aktivierte Attributwert ändert sich nicht mit dem Status des Kontrollkästchens, während dies bei der überprüften Eigenschaft der Fall ist. Daher ist die browserübergreifende Methode, um festzustellen, ob ein Kontrollkästchen aktiviert ist, die Verwendung der Eigenschaft ...

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 aktivierte Eigenschaft eines Kontrollkästchens. Die Methode .prop () sollte verwendet werden, um deaktiviert und aktiviert anstelle der Methode .attr () zu setzen.

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

Zusammenfassung

Verwenden Sie die Methode .prop () , um [...] DOM-Eigenschaften wie den [...] deaktivierten Status von Formularelementen zu ändern .

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

Was den Teil zum Deaktivieren bei Änderung betrifft: Es gibt ein Ereignis namens "Eingabe", aber die Browserunterstützung ist begrenzt und es handelt sich nicht um ein 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 beide kombinieren (einige Leute hören 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);
    });
});

Um die Verwendung deaktivierter Attribute zu entfernen,

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

und um die Verwendung deaktivierter Attribute hinzuzufügen,

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

Genießen :)

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

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

Eric, Ihr Code schien für mich 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 geht's 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');
    }
})

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 "deaktiviert" enthält

Hier ist die Lösung für das Dateieingabefeld .

So deaktivieren Sie eine Senden-Schaltfläche für ein Dateifeld, wenn keine Datei ausgewählt ist, und aktivieren Sie diese Option, nachdem der Benutzer eine Datei zum Hochladen ausgewählt hat:

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

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 ein Live-Beispiel

Für die 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);
        }
    });
});

Wenn es sich bei der Schaltfläche selbst um eine Schaltfläche im jQuery-Stil handelt (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" );

In den obigen Antworten wird nicht auch nach menübasierten Ausschneide- / Einfügeereignissen gesucht. Unten ist der Code, mit dem ich beides mache. Beachten Sie, dass die Aktion tatsächlich mit einer Zeitüberschreitung ausgeführt wird, da der Schnitt und vergangene Ereignisse tatsächlich ausgelöst werden, bevor die Änderung vorgenommen wurde. Die Zeitüberschreitung gibt also 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);
});

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

In Frage ausgewähltes 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 im HTML-Formular hinzu und überprüfen bei jedem Tastendruck alle Eingabefelder. Wenn mindestens ein Eingabefeld leer ist oder nur Leerzeichen enthält, weisen wir der deaktivierten Variablen den wahren Wert zu und deaktivieren die Schaltfläche zum Senden.

Wenn Sie die Schaltfläche "Senden" 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.

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 verwandeln

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

Ich musste ein bisschen arbeiten, um dies an meinen Anwendungsfall anzupassen.

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.

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

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

Alle Arten von Lösungen werden mitgeliefert. Ich möchte also eine andere Lösung suchen. Es ist einfach einfacher, wenn Sie idIhren Eingabefeldern ein Attribut hinzufügen .

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

Jetzt ist hier dein jQuery

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

Ich hoffe, dass der folgende Code jemandem hilft .. !!! :) :)

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