Soru JQuery ile bir girişi devre dışı bırakın / etkinleştirin mi?


$input.disabled = true;

veya

$input.disabled = "disabled";

Standart yol hangisidir? Tersine, engellenmiş bir girişi nasıl etkinleştirirsiniz?


1913
2017-09-12 05:21


Menşei


olası kopyası JQuery'yi kullanarak engelli özniteliği kaldırılsın mı? - user2381114
Buldum bağlı olduğu ifade yararlı bulabileceğiniz eklenti - Ben


Cevaplar:


jQuery 1,6 +

Değiştirmek için disabled özelliği kullanmalısın .prop() işlevi.

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

jQuery 1.5 ve aşağısı

.prop() işlev mevcut değil, ancak .attr() benzer:

Engelli özniteliğini ayarlayın.

$("input").attr('disabled','disabled');

Tekrar etkinleştirmek için uygun yöntem kullanmaktır .removeAttr()

$("input").removeAttr('disabled');

JQuery'nin herhangi bir sürümünde

Her zaman gerçek DOM nesnesine güvenebilirsiniz ve yalnızca bir öğeyle ilgileniyorsanız, diğer iki seçenekten muhtemelen biraz daha hızlıdır:

// assuming an event handler thus 'this'
this.disabled = true;

Kullanmanın avantajı .prop() veya .attr() yöntemleri, seçili öğelerin bir demet için özelliği ayarlayabilirsiniz.


Not: 1.6'da bir .removeProp() çok benzeyen bir yöntem removeAttr(), ama o KULLANILMAMALI gibi yerel mülklerde 'disabled'  Belgelerden alıntı:

Not: İşaretli, devre dışı veya seçili gibi yerel özellikleri kaldırmak için bu yöntemi kullanmayın. Bu özellik tamamen kaldırılacak ve kaldırıldıktan sonra tekrar elemanlara eklenemez. Bu özellikleri false olarak ayarlamak için .prop () öğesini kullanın.

Aslında, bu yöntem için birçok meşru kullanım olduğundan şüphe duyuyorum, boolean prodüksiyonları, onları "öznitelik" benzerleri gibi "onları kaldırma" yerine, false olarak ayarlamanız gerektiği şekilde yapılır.


3293
2017-09-12 05:23



Bir kenara kadar, TÜM form giriş kontrollerini devre dışı bırakmak istiyorsanız - unutmayın. onay kutuları, radyolar, textareas vb. - seçmek zorundasınız ':input'değil, sadece 'input'. İkincisi sadece gerçek <giriş> elemanlarını seçer. - Cornel Masson
@CornelMasson input,textarea,select,button kullanmaktan biraz daha iyidir :input - :input Bir seçici olarak oldukça etkisiz çünkü seçmesi gerekiyor * sonra her elemanın üzerine gelin ve tagname ile filtreleyin - eğer 4 tagname selektörünü doğrudan aktarırsanız daha hızlıdır. Ayrıca, :input standart bir CSS seçici değildir, bu yüzden mümkün olan tüm performans kazançları querySelectorAll kayıp - gnarf
Bu, kullanıcının ona erişmesini önler mi, yoksa aslında web isteğinden kaldırır mı? - OneChillDude
Kullanmak .removeProp("disabled") , Chrome gibi bazı tarayıcılarda, bazı Firefox gibi iyi çalışıyorsa, @ThomasDavidBaker tarafından işaret edildiği gibi "mülkün tamamen kaldırılması ve tekrar eklenmemesi" sorununa neden oluyordu. Burada gerçekten dikkatli olmalıyız. Her zaman kullan .prop("disabled",false) yerine - Sandeepan Nath
Bağlantı elemanları devre dışı bırakmak için ne .prop veya .attr yeterli değildir; .prop, 'denetimi' bile grilemez (.attr yapar, ancak href hala aktiftir). Ayrıca, preventDefault () öğesini çağıran bir tıklama etkinliği işleyicisi de eklemelisiniz. - Jeff Lowery


Sadece yeni sözleşmeler için ve & 's ileriye dönük uyarlanabilir hale getirmek için (ECMA6 ile büyük ölçüde değişmedikçe (????):

$(document).on('event_name', '#your_id', function() {
    $(this).removeAttr('disabled');
});

ve

$(document).off('event_name', '#your_id', function() {
    $(this).attr('disabled','disabled');   
});

51
2017-07-18 11:51



Jikes! Niye ya $(document).on('event_name', '#your_id', function() {...}) yerine $('#your_id').on('event_name', function() {...}). Açıklandığı gibi jQuery .on () belgeleri eski delegasyonu kullanır ve dinler herşey  event_name kabarcı olan olaylar document ve eşleme için onları kontrol eder #your_id. İkincisi özellikle $('#your_id') Sadece olaylar ve daha iyi ölçekler. - Peter V. Mørch
Önceden, DOM'a herhangi bir noktada yerleştirilen elemanlar için çalışır, ikincisi sadece o anda mevcut olanlar için. - crazymykl
@crazymykl Doğru, ancak sayfanızda halihazırda bulunan bir kimliğe sahip öğeler eklememelisiniz. - SepehrM


    // Disable #x
    $( "#x" ).prop( "disabled", true );
    // Enable #x
    $( "#x" ).prop( "disabled", false );

Bazen giriş veya textarea gibi form öğelerini devre dışı bırakmanız / etkinleştirmeniz gerekir. Jquery, bu özelliği devre dışı bırakılmış özniteliği "devre dışı" olarak ayarlamanıza yardımcı olur. Örneğin:

  //To disable 
  $('.someElement').attr('disabled', 'disabled');

Devre dışı bırakılmış öğeyi etkinleştirmek için bu öğeden "disabled" özelliğini kaldırmanız veya dizgisini boşaltmanız gerekir. Ör.

//To enable 
$('.someElement').removeAttr('disabled');

// OR you can set attr to "" 
$('.someElement').attr('disabled', '');

bakın:http://garmoncheg.blogspot.fr/2011/07/how-to-disableenable-element-with.html


25
2018-04-07 10:27





$("input")[0].disabled = true;

veya

$("input")[0].disabled = false;

12
2017-09-06 14:53



Tabii ki jQuery için sorulan soru ve bu durum düz JavaScript’te durumu değiştiriyor, ancak çalışıyor. - basic6
Bu, durumu JavaScript'te değiştirir, ancak yine de ilk girişi almak için bir jQuery seçici kullanır. - cjsimon
Ama sanırım jQuery ansiklopedisini burada yapıyoruz, eğer bir cevap işe yarıyorsa, iyi - Sajjad Shirazy
Bu iyi bir cevap, teşekkürler. - Ali Karaca


Bunu küresel bir yere koyabilirsiniz:

$.prototype.enable = function () {
    $.each(this, function (index, el) {
        $(el).removeAttr('disabled');
    });
}

$.prototype.disable = function () {
    $.each(this, function (index, el) {
        $(el).attr('disabled', 'disabled');
    });
}

Ve sonra şöyle bir şeyler yazabilirsiniz:

$(".myInputs").enable();
$("#otherInput").disable();

7
2017-10-18 13:42



İşlevselliği sarma kullanışlı iken, kullanmış olmalı prop ve değil  attr ile disabled düzgün çalışması için özellik (jQuery 1.6 veya üstünü varsayarak). - Gone Coding
@TrueBlueAussie Kullanmanın dezavantajı nedir attr ? Yukarıdaki kodları bazı projelerde kullanıyorum ve hatırladığım kadarıyla tamam çalışıyor - Nicolae Surdu
Açık istisnalar, sahnelerin arkasındaki özelliklere sahip kontrollerdir. En ünlü olanı checked onay kutularının özelliği. kullanma attraynı sonucu vermeyecek. - Gone Coding
Bu "$ (". MyInputs "). Enable ();" benim için çalışma, ama bu "$ (el) .removeAttr ('disabled');” çok iyi çalışıyor, teşekkürler - CrsCaballero


Sadece mevcut durumu tersine çevirmek istiyorsanız (geçiş butonu davranışı gibi):

$("input").prop('disabled', ! $("input").prop('disabled') );

4
2017-09-12 16:28





2018 için güncelleme:

Artık jQuery'ye gerek yok ve o zamandan beri bir süredir var. document.querySelector  veya document.querySelectorAll (birden çok öğe için) neredeyse tam olarak aynı işi yapar, artı daha açık olanlar getElementById, getElementsByClassName, getElementsByTagName

"Girdi onay kutusu" sınıfının bir alanını devre dışı bırakma

document.querySelector('.input-checkbox').disabled = true;

veya çoklu elemanlar

document.querySelectorAll('.input-checkbox').forEach(el => el.disabled = true);

2
2018-02-11 18:29



Soru, özellikle jQuery hakkında sorar ... ama eşit olarak ifadeniz doğrudur ve jQuery'nin bilmediğini bilmeye değer gerek Artık birden fazla öğe olduğunda bunun için kullanılacak. - ADyson


Form öğesini devre dışı bırakmak veya etkinleştirmek veya jQuery kullanarak dinamik olarak denetlemek için jQuery prop () yöntemini kullanabilirsiniz. Prop () yöntemi jQuery 1.6 ve üstü gerektirir.

Örnek:

<script type="text/javascript">
        $(document).ready(function(){
            $('form input[type="submit"]').prop("disabled", true);
            $(".agree").click(function(){
                if($(this).prop("checked") == true){
                    $('form input[type="submit"]').prop("disabled", false);
                }
                else if($(this).prop("checked") == false){
                    $('form input[type="submit"]').prop("disabled", true);
                }
            });
        });
    </script>

2
2017-08-02 10:26



Hayat koruyucu ... teşekkürler @SPARTAN - wild coder


Onları kullanmanın birkaç yolu vardır, herhangi bir elemanı etkinleştirebilir / devre dışı bırakabilirsiniz. :

Yaklaşım 1

$("#txtName").attr("disabled", true);

Yaklaşım 2

$("#txtName").attr("disabled", "disabled");

JQuery 1.7 veya daha yüksek bir sürüm kullanıyorsanız, attr () yerine prop () öğesini kullanın.

$("#txtName").prop("disabled", "disabled");

Eğer herhangi bir elemanı etkinleştirmek istiyorsanız, o zaman bunu devre dışı bırakmak için yaptığınız şeyin tam tersini yapmak zorundasınız. Ancak jQuery, herhangi bir özelliği kaldırmak için başka bir yol sağlar.

Yaklaşım 1

$("#txtName").attr("disabled", false);

Yaklaşım 2

$("#txtName").attr("disabled", "");

Yaklaşım 3

$("#txtName").removeAttr("disabled");

Yine, jQuery 1.7 veya daha yüksek bir sürüm kullanıyorsanız, attr () yerine prop () öğesini kullanın. Budur. JQuery'yi kullanarak herhangi bir elemanı nasıl etkinleştirir veya devre dışı bırakırsınız.


1
2017-08-02 10:59