jQuery gönderme düğmesini devre dışı bırak / etkinleştir

Bu HTML var:

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

Nasıl böyle bir şey yapabilirim:

• Metin alanı boş olduğunda gönderme devre dışı bırakılmalıdır (devre dışı = "devre dışı").
• Devre dışı bırakılan özniteliği kaldırmak için metin alanına bir şey yazıldığında.
• Metin alanı tekrar boşalırsa (metin silinir) gönder düğmesinin yeniden devre dışı bırakılması gerekir.

Ben böyle bir şey denedim:

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

… Ama işe yaramıyor. Herhangi bir fikir?

Sorun, change olayının yalnızca odak girişten uzaklaştığında tetiklenmesidir (örneğin, birisi girişi veya sekmeleri dışarı tıklar). Bunun yerine keyup kullanmayı deneyin:

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

Bu soru 2 yaşında, ancak yine de iyi bir soru ve ilk Google sonucuydu ... ancak mevcut yanıtların tümü HTML özelliğini ( kaldırıldı (removeAttr ("devre dışı")) "devre dışı" olarak ayarlamayı ve kaldırmayı önerir. doğru yaklaşım. Özellik ile mülk arasında çok fazla karışıklık var.

HTML

<input type="button" disabled>İşaretlemedeki "devre dışı bırakıldı" , W3C tarafından bir boole özniteliği olarak adlandırılır .

HTML ve DOM

Alıntı:

DOM'da bir özellik var; HTML'de, DOM'a ayrıştırılan bir özellik bulunur.

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

JQuery

İlişkili:

Bununla birlikte, kontrol edilen özellik hakkında hatırlanması gereken en önemli kavram, kontrol edilen özelliğe karşılık gelmemesidir. Özelliği, aslında defaultChecked özelliğine karşılık gelen ve başlangıç değerini ayarlamak için tek kullanılmalıdır onay kutusunu. İşaretli özellik değeri, işaretli özellik değişirken onay kutusunun durumu ile değişmez. Bu nedenle, bir onay kutusunun işaretli olup olmadığını belirlemenin çapraz tarayıcı uyumlu yolu özelliği kullanmaktır ...

İlgili:

Özellikler genellikle serileştirilmiş HTML niteliğini değiştirmeden bir DOM öğesinin dinamik durumunu etkiler. Örnekler, giriş öğelerinin value özelliğini, giriş ve düğmelerin devre dışı özelliğini veya bir onay kutusunun işaretli özelliğini içerir. .Atrop () yöntemi yerine devre dışı bırakılmış ve denetlenmiş olarak ayarlamak için .prop () yöntemi kullanılmalıdır.

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

özet

Form öğelerinin [...] devre dışı durumu gibi DOM özelliklerini [...] değiştirmek için .prop () yöntemini kullanın.

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

Sorunun değiştirilmesinde devre dışı bırak bölümüne gelince: "input" adlı bir olay var, ancak tarayıcı desteği sınırlıdır ve bu bir jQuery olayı değildir, bu nedenle jQuery bunu yapmaz. Change olayı güvenilir bir şekilde çalışır, ancak öğe odağı kaybettiğinde tetiklenir. Yani kişi bu ikisini birleştirebilir (bazı insanlar da keyup yapıştırmayı dinler).

İşte ne demek istediğimi göstermek için test edilmemiş bir kod parçası:

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

Devre dışı bırakılmış özellik kullanımını kaldırmak için,

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

ve devre dışı bırakılmış özellik kullanımını eklemek için,

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

Zevk almak :)

ya da her küçük şey için jQ kullanmayı sevmeyen bizim için:

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

eric, kullanıcı metin girdikten sonra tüm metni sildiğinde kodunuz benim için çalışmıyor gibi görünüyor. Herkes aynı sorunu yaşadıysanız başka bir sürüm oluşturdu. İşte millet:

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

Bu şekilde çalışacaktır:

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

HTML'nizde 'devre dışı' bir özellik olduğundan emin olun

İşte dosya giriş alanı için çözüm .

Bir dosya seçilmediğinde dosya alanı için bir gönderme düğmesini devre dışı bırakmak için kullanıcı yüklemek üzere bir dosya seçtikten sonra etkinleştirin:

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

ayrıca şöyle bir şey kullanabilirsiniz:

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

İşte canlı örnek

Form girişi için:

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

Düğmenin kendisi jQuery tarzı bir düğmedeyse (.button () ile), devre dışı bırakılan özniteliği kaldırdıktan / ekledikten sonra doğru sınıfların eklenmesini / kaldırılmasını sağlamak için düğmenin durumunu yenilemeniz gerekir.

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

Yukarıdaki yanıtlar ayrıca menü tabanlı kesme / yapıştırma olaylarının kontrol edilmesine de değinmemektedir. Her ikisini de yapmak için kullandığım kod aşağıda. Eylemin bir zaman aşımı ile gerçekleştiğine dikkat edin, çünkü kesme ve geçmiş olaylar aslında değişiklik gerçekleşmeden önce tetiklenir, bu nedenle zaman aşımı bunun gerçekleşmesi için biraz zaman verir.

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

Vanilya JS Çözümü. Sadece bir girdi için değil, bütün bir form için çalışır.

Söz konusu JavaScript etiketi seçildi.

HTML Formu:

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>

Bazı açıklamalar:

Bu kodda, html formunda keyup olayı ekliyoruz ve her tuşa basıldığında tüm giriş alanlarını kontrol ediyoruz. En az bir girdi alanı boşsa veya yalnızca boşluk karakterleri içeriyorsa, devre dışı bırakılan değişkene gerçek değeri atarız ve gönderme düğmesini devre dışı bırakırız.

Gerekli tüm giriş alanları dolduruluncaya kadar gönder düğmesini devre dışı bırakmanız gerekirse - değiştirin:

inputs.forEach(function(input, index) {

ile:

required_inputs.forEach(function(input, index) {

burada required_inputs zaten gerekli girdi alanlarını içeren bir dizi olarak tanımlanır.

Eğer girdiniz boşsa ve başka varsa.

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

yoksa yanlış olanı doğru olarak değiştirebiliriz

Devre Dışı: $('input[type="submit"]').prop('disabled', true);

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

Yukarıdaki etkinleştirme kodu şundan daha doğrudur:

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

Her iki yöntemi de kullanabilirsiniz.

Bunu kullanım durumuma uydurmak için biraz çalışmak zorunda kaldım.

Göndermeden önce tüm alanların bir değeri olması gereken bir form var.

İşte yaptım:

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

Buradaki yanıtları için herkese teşekkürler.

Gönder düğmesini etkinleştirmek veya devre dışı bırakmak için lütfen aşağıdaki koda bakın

Ad ve Şehir alanlarının değeri varsa, yalnızca Gönder düğmesi etkinleştirilir.

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

bu snippet'e projemden bak

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

işleminiz tamamlandıktan sonra düğmeyi devre dışı bırakmanız yeterlidir

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

Her türlü çözelti sağlanır. Bu yüzden farklı bir çözüm denemek istiyorum. idGiriş alanlarınıza bir özellik eklerseniz daha kolay olacaktır .

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

Şimdi işte senin jQuery

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

Umarım aşağıdaki kod birine yardımcı olur .. !!! :)

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