javascript - jQuery inaktivera/aktivera skicka-knapp

Jag har denna HTML:

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

Hur kan jag göra något som detta:

  • När textfältet är tomt ska skicka-knappen vara inaktiverad (disabled="disabled").
  • När något skrivs in i textfältet för att ta bort attributet 'disabled'.
  • Om textfältet blir tomt igen (texten raderas) ska skicka-knappen återigen inaktiveras.

Jag försökte något liknande detta:

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

…men det fungerar inte. Några idéer?

Svar #1

Problemet är att change-händelsen bara utlöses när fokus flyttas bort från inmatningen (t.ex. när någon klickar utanför inmatningen eller tabbar bort från den). Försök använda keyup istället:

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

Svar #2

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

Svar #3

Denna fråga är 2 år gammal men den är fortfarande en bra fråga och den var det första Googleresultatet, men alla befintliga svar rekommenderar att sätta och ta bort HTML-attributet (removeAttr("disabled")) "disabled", vilket inte är rätt tillvägagångssätt. Det finns mycket förvirring kring attribut vs. egenskap.

HTML

"disabled" i <input type="button" disabled> i markupen kallas ett boolean-attribut av W3C.

HTML vs. DOM

Citat :

En egenskap finns i DOM; ett attribut finns i HTML som analyseras till DOM.

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

jQuery

Relaterat :

Ändå är det viktigaste att komma ihåg om attributet checked att det inte motsvarar egenskapen checked. Attributet motsvarar faktiskt egenskapen defaultChecked och bör endast användas för att sätta det initiala värdet på kryssrutan. Värdet på attributet checked ändras inte med kryssrutans tillstånd, medan egenskapen checked gör det. Därför är det sätt som fungerar över olika webbläsare för att avgöra om en kryssruta är markerad att använda egenskapen.

Relevant:

Egenskaper påverkar generellt sett DOM-elementets dynamiska tillstånd utan att ändra den serialiserade HTML-attributet. Exempel inkluderar egenskapen value för input-element, egenskapen disabled för inputs och knappar, eller egenskapen checked för en kryssruta. Metoden .prop() bör användas för att sätta disabled och checked istället för metoden .attr().

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

Sammanfattning

För att [...] ändra DOM-egenskaper som [...] inaktiverat tillstånd för formelement, använd .prop()-metoden.

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

När det gäller delen av frågan om inaktivering vid ändring: Det finns ett event som kallas "input", men webbläsarstöd är begränsat och det är inte ett jQuery-event, så jQuery får det inte att fungera. Change-eventet fungerar pålitligt, men utlöses när elementet förlorar fokus. Så man kan kombinera de två (vissa lyssnar också på keyup och klistra in).

Här är ett otestat kodstycke för att visa vad jag menar:

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

Svar #4

För att ta bort attributet disabled, använd

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

och för att lägga till attributet disabled använd,

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

Njut :)

Svar #5

eller för oss som inte gillar att använda jQ för varje liten sak:

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

Svar #6

Eric, din kod verkade inte fungera för mig när användaren skriver in text och sedan raderar all text. Jag skapade en annan version om någon upplevde samma problem. Här har ni, folk:

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

Svar #7

Det kommer att fungera så här:

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

Se till att det finns ett 'disabled'-attribut i din HTML

Svar #8

Vi kan helt enkelt ha if & else. Om vi antar att din input är tom kan vi ha

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

annars kan vi ändra false till true

Svar #9

du kan också använda något som detta :

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

här är ett levande exempel

Svar #10

För formulärinloggning:

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

Svar #11

Här är lösningen för filinmatningsfältet.

För att inaktivera en skicka-knapp för filfält när ingen fil är vald, och sedan aktivera den efter att användaren har valt en fil att ladda upp:

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

Svar #12

Om knappen själv är en jQuery-stiliserad knapp (med .button()) måste du uppdatera knappens tillstånd så att rätt klasser läggs till/tas bort när du har tagit bort/lagt till attributet disabled.

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

Svar #13

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

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

Koden för aktivering ovan är mer exakt än:

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

Du kan använda båda metoderna.

Relaterade artiklar