jQuery desativar / ativar o botão enviar

Eu tenho este HTML:

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

Como posso fazer algo assim:

• Quando o campo de texto estiver vazio, o envio deverá ser desativado (desativado = "desativado").
• Quando algo é digitado no campo de texto para remover o atributo desativado.
• Se o campo de texto ficar vazio novamente (o texto é excluído), o botão enviar deverá ser desativado novamente.

Eu tentei algo assim:

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

... mas não funciona. Alguma ideia?

O problema é que o evento de mudança é acionado apenas quando o foco é desviado da entrada (por exemplo, alguém clica na entrada ou guia nela). Tente usar o keyup:

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

Esta pergunta tem 2 anos, mas ainda é uma boa pergunta e foi o primeiro resultado do Google ... mas todas as respostas existentes recomendam configurar e remover o atributo HTML (removeAttr ("disabled")) "disabled", que não é a abordagem correta. Há muita confusão sobre atributo versus propriedade.

HTML

O "desativado" na <input type="button" disabled>marcação é chamado de atributo booleano pelo W3C .

HTML vs. DOM

Citar:

Uma propriedade está no DOM; um atributo está no HTML que é analisado no DOM.

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

JQuery

Relacionado:

No entanto, o conceito mais importante a ser lembrado sobre o atributo verificado é que ele não corresponde à propriedade marcada. O atributo realmente corresponde à propriedade defaultChecked e deve ser usado apenas para definir o valor inicial da caixa de seleção. O valor do atributo marcado não muda com o estado da caixa de seleção, enquanto a propriedade marcada. Portanto, a maneira compatível com vários navegadores para determinar se uma caixa de seleção está marcada é usar a propriedade ...

Relevante:

As propriedades geralmente afetam o estado dinâmico de um elemento DOM sem alterar o atributo HTML serializado. Os exemplos incluem a propriedade value de elementos de entrada, a propriedade desativada de entradas e botões ou a propriedade marcada de uma caixa de seleção. O método .prop () deve ser usado para definir desativado e verificado em vez do método .attr ().

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

Sumário

Para alterar propriedades do DOM, como o estado [...] desabilitado dos elementos do formulário, use o .prop () método .

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

Quanto à desativação na alteração da parte da pergunta: existe um evento chamado "input", mas o suporte ao navegador é limitado e não é um evento jQuery, portanto, o jQuery não fará com que funcione. O evento de mudança funciona de maneira confiável, mas é acionado quando o elemento perde o foco. Então, pode-se combinar os dois (algumas pessoas também escutam as teclas e colam).

Aqui está um trecho de código não testado para mostrar o que quero dizer:

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

Para remover o atributo desativado, use

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

e para adicionar o uso de atributo desativado,

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

Desfrutar :)

ou para nós que não gostam de usar o jQ para todas as pequenas coisas:

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

eric, seu código parece não funcionar para mim quando o usuário digita o texto e exclui todo o texto. eu criei outra versão se alguém experimentou o mesmo problema. aqui vão vocês:

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

Funcionará assim:

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

Verifique se há um atributo 'desativado' no seu HTML

Aqui está a solução para o campo de entrada de arquivo .

Para desativar um botão de envio para o campo de arquivo quando um arquivo não for escolhido, ative depois que o usuário escolher um arquivo para carregar:

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

você também pode usar algo como isto:

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

aqui está um exemplo ao vivo

Para o login do formulário:

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

Se o botão for um estilo de jQuery (com .button ()), será necessário atualizar o estado do botão para que as classes corretas sejam adicionadas / removidas depois de remover / adicionar o atributo desativado.

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

As respostas acima não abordam também a verificação de eventos de recortar / colar com base no menu. Abaixo está o código que eu uso para fazer as duas coisas. Observe que a ação realmente acontece com um tempo limite, porque os eventos de corte e do passado são acionados antes da mudança, portanto, o tempo limite dá um tempo para que isso aconteça.

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

Solução de baunilha JS. Funciona para um formulário inteiro e não apenas para uma entrada.

Em questão, selecione a tag JavaScript.

Formulário 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>

Alguma explicação:

Nesse código, adicionamos o evento keyup no formulário html e, em todas as teclas pressionadas, verificamos todos os campos de entrada. Se pelo menos um campo de entrada que temos estiver vazio ou contiver apenas caracteres de espaço, atribuímos o valor verdadeiro à variável desativada e desabilite o botão de envio.

Se você precisar desativar o botão enviar até que todos os campos de entrada obrigatórios sejam preenchidos - substitua:

inputs.forEach(function(input, index) {

com:

required_inputs.forEach(function(input, index) {

em que required_inputs já é declarado array contendo apenas os campos de entrada necessários.

Podemos simplesmente ter if & else .se supor que sua entrada está vazia, podemos ter

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

caso contrário, podemos transformar falso em verdadeiro

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

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

O código de ativação acima é mais preciso do que:

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

Você pode usar os dois métodos.

Eu tive que trabalhar um pouco para fazer isso se encaixar no meu caso de uso.

Eu tenho um formulário em que todos os campos devem ter um valor antes de enviar.

Aqui está o que eu fiz:

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

Obrigado a todos por suas respostas aqui.

Consulte o código abaixo para ativar ou desativar o botão Enviar

Se os campos Nome e Cidade tiverem valor, apenas o botão Enviar será ativado.

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

dê uma olhada neste trecho do meu projeto

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

apenas desabilitou o botão após sua operação ser executada

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

Todos os tipos de solução são fornecidos. Então, eu quero tentar uma solução diferente. Simplesmente será mais fácil se você adicionar um idatributo nos seus campos de entrada.

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

Agora aqui está o seu jQuery

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

Espero que o código abaixo ajude alguém .. !!! :)

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