jQuery in-/uitschakelen knop Verzenden

Ik heb deze HTML:

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

Hoe kan ik zoiets doen:

• Als het tekstveld leeg is, moet de indiening worden uitgeschakeld (disabled=”disabled”).
• Als er iets in het tekstveld wordt getypt om het uitgeschakelde kenmerk te verwijderen.
• Als het tekstveld weer leeg wordt (de tekst is verwijderd), moet de verzendknop weer worden uitgeschakeld.

Ik heb zoiets als dit geprobeerd:

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

…maar het werkt niet. Enig idee?

Antwoord 1, autoriteit 100%

Het probleem is dat de wijzigingsgebeurtenis alleen wordt geactiveerd wanneer de focus van de invoer wordt verwijderd (bijv. iemand klikt de invoer weg of tabt eruit). Probeer in plaats daarvan keyup te gebruiken:

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

Antwoord 2, autoriteit 11%

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

Antwoord 3, Autoriteit 6%

Deze vraag is 2 jaar oud, maar het is nog steeds een goede vraag en het was het eerste Google-resultaat … maar alle bestaande antwoorden aanbevelen instelling en Verwijderen Het HTML Attribuut (Removeattr (“uitgeschakeld”)) “uitgeschakeld”, wat niet de juiste aanpak is. Er is veel verwarring over attribuut versus eigendom.

HTML

De “uitgeschakeld” in <input type="button" disabled>in de markup wordt een Boolean-kenmerk door de W3C genoemd.

HTML vs. DOM

QUOTE:

Een eigenschap is in de DOM; een kenmerk bevindt zich in de HTML die in de DOM is geparseerd.

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

jQuery

gerelateerd:

Niettemin is het belangrijkste concept dat onthoudt van het gecontroleerde kenmerk dat het niet overeenkomt met de ingecheckte eigenschap. Het kenmerk komt daadwerkelijk overeen met het eigenschap IntinessChecked en moet alleen worden gebruikt om de initiële waarde van het selectievakje in te stellen. De ingecheckte attribuutwaarde verandert niet met de toestand van het selectievakje, terwijl de ingecheckte woning dat doet. Daarom is de Cross-Browser-compatibele manier om te bepalen of een selectievakje wordt gecontroleerd om de accommodatie te gebruiken …

Relevant:

Eigenschappen zijn over het algemeen van invloed op de dynamische status van een DOM-element zonder het geserialiseerde HTML-kenmerk te wijzigen. Voorbeelden zijn de eigenschap value van invoerelementen, de eigenschap disabledvan invoer en knoppen, of de eigenschap gecontroleerd van een selectievakje. De .prop()-methode moet worden gebruikt om uitgeschakeld en gecontroleerd in te stellen in plaats van de .attr()-methode.

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

Samenvatting

Om […] DOM-eigenschappen te wijzigen, zoals de […] uitgeschakelde status van formulierelementen, gebruikt u de .prop()methode.

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

Wat betreft het uitschakelen bij wijziging van de vraag: er is een gebeurtenis genaamd “input”, maar browserondersteuning is beperkten het is geen jQuery-gebeurtenis, dus jQuery zal het niet laten werken. De wijzigingsgebeurtenis werkt betrouwbaar, maar wordt geactiveerd wanneer het element de focus verliest. Dus je zou de twee kunnen combineren (sommige mensen luisteren ook naar keyup en plakken).

Hier is een niet-getest stukje code om te laten zien wat ik bedoel:

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

Antwoord 4, autoriteit 4%

Om uitgeschakeld kenmerkgebruik te verwijderen,

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

en om uitgeschakeld kenmerkgebruik toe te voegen,

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

Veel plezier 🙂

Antwoord 5, autoriteit 3%

of voor ons die jQ niet voor elk klein ding willen gebruiken:

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

Antwoord 6, autoriteit 2%

eric, je code leek niet te werken voor mij wanneer de gebruiker tekst invoert en vervolgens alle tekst verwijdert. ik heb een andere versie gemaakt als iemand hetzelfde probleem heeft ondervonden. hier gaan mensen:

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

Antwoord 7

Het werkt als volgt:

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

Zorg ervoor dat er een ‘disabled’-kenmerk in uw HTML staat

Antwoord 8

je kunt ook zoiets als dit gebruiken:

$(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 is Live voorbeeld

Antwoord 9

Hier is de oplossing voor bestandsinvoerveld.

Om een verzendknop voor het bestandsveld uit te schakelen wanneer een bestand niet is gekozen, schakel het dan in nadat de gebruiker een bestand heeft gekozen om te uploaden:

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

Antwoord 10

Voor aanmelding via formulier:

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

Antwoord 11

Als de knop zelf een jQuery-stijl knop is (met .button()), moet je de status van de knop vernieuwen zodat de juiste klassen worden toegevoegd/verwijderd zodra je het uitgeschakelde kenmerk hebt verwijderd/toegevoegd.

p>

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

Antwoord 12

De bovenstaande antwoorden hebben geen betrekking op het controleren van op menu’s gebaseerde knip- en plakgebeurtenissen. Hieronder is de code die ik gebruik om beide te doen. Merk op dat de actie daadwerkelijk plaatsvindt met een time-out, omdat de cut en eerdere gebeurtenissen daadwerkelijk worden geactiveerd voordat de wijziging plaatsvond, dus de time-out geeft wat tijd om dat te laten gebeuren.

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

Antwoord 13

Vanilla JS-oplossing. Het werkt voor een hele vorm, niet alleen voor één invoer.

In kwestie geselecteerde JavaScript-tag.

HTML-formulier:

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>

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

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

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

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

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

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

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

let check = inp=> inp.nextElementSibling.disabled = !inp.value;

<input type="text" name="textField" oninput="check(this)"/>
<input type="submit" value="send" disabled />

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