Frage Deaktivieren / Aktivieren einer Eingabe mit jQuery?


$input.disabled = true;

oder

$input.disabled = "disabled";

Welches ist der Standardweg? Und umgekehrt, wie aktivieren Sie eine deaktivierte Eingabe?


1910
2017-09-12 05:21


Ursprung


Antworten:


jQuery 1.6+

Um es zu ändern disabled Eigenschaft, die Sie verwenden sollten .prop() Funktion.

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

jQuery 1.5 und niedriger

Das .prop() Funktion existiert nicht, aber .attr() tut ähnlich:

Legen Sie das deaktivierte Attribut fest.

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

Um es wieder zu aktivieren, muss die richtige Methode verwendet werden .removeAttr()

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

In jeder Version von jQuery

Sie können sich immer auf das eigentliche DOM-Objekt verlassen und sind wahrscheinlich etwas schneller als die anderen beiden Optionen, wenn Sie nur mit einem Element arbeiten:

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

Der Vorteil der Verwendung der .prop() oder .attr() Methoden ist, dass Sie die Eigenschaft für eine Reihe von ausgewählten Elementen festlegen können.


Hinweis: In 1.6 gibt es ein .removeProp() Methode, die sehr ähnlich klingt removeAttr(), aber es SOLLTE NICHT BENUTZT WERDEN auf native Eigenschaften wie 'disabled'  Auszug aus der Dokumentation:

Hinweis: Verwenden Sie diese Methode nicht, um native Eigenschaften wie "aktiviert", "deaktiviert" oder "ausgewählt" zu entfernen. Dadurch wird die Eigenschaft vollständig entfernt und kann nach dem Entfernen nicht erneut zum Element hinzugefügt werden. Verwenden Sie .prop (), um diese Eigenschaften stattdessen auf false festzulegen.

Tatsächlich bezweifle ich, dass es viele legitime Verwendungen für diese Methode gibt, boolesche Requisiten werden in einer solchen Weise ausgeführt, dass Sie sie auf "false" setzen sollten, anstatt sie wie ihre "Attribut" -Entsprechungen in 1.5 zu entfernen


3289
2017-09-12 05:23



Nur um der neuen Konventionen willen und um es anpassungsfähig zu machen (es sei denn, die Dinge ändern sich drastisch mit ECMA6 (????):

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

und

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

51
2017-07-18 11:51



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

Manchmal müssen Sie das Formularelement wie Eingabe oder Textbereich deaktivieren / aktivieren. Jquery hilft Ihnen, dies einfach zu machen, indem Sie das Attribut disabled auf "disabled" setzen. Für z.B.

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

Um das deaktivierte Element zu aktivieren, müssen Sie das Attribut "disabled" aus diesem Element entfernen oder dessen String leeren. Für z.B.

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

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

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


25
2018-04-07 10:27



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

oder

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

12
2017-09-06 14:53



Sie können dies global in Ihren Code einfügen:

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

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

Und dann kannst du Sachen schreiben wie:

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

7
2017-10-18 13:42



Wenn Sie nur den aktuellen Zustand invertieren möchten (wie bei einem Toggle-Button-Verhalten):

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

4
2017-09-12 16:28



Update für 2018:

Jetzt gibt es keine Notwendigkeit für jQuery und es ist schon eine Weile her document.querySelector  oder document.querySelectorAll (für mehrere Elemente) fast genau den gleichen Job wie $, plus explizitere getElementById, getElementsByClassName, getElementsByTagName

Ein Feld der Klasse "input-checkbox" deaktivieren

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

oder mehrere Elemente

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

2
2018-02-11 18:29



Sie können die jQuery prop () -Methode verwenden, um das Formularelement oder das Steuerelement mithilfe von jQuery dynamisch zu deaktivieren oder zu aktivieren. Die prop () Methode benötigt jQuery 1.6 und höher.

Beispiel:

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

1
2017-08-02 10:26



Ich benutzte @gnarf Antwort und fügte es als Funktion hinzu

   $.fn.disabled = function (isDisabled) {
     if (isDisabled) {
       this.attr('disabled', 'disabled');
     } else {
       this.removeAttr('disabled');
     }
   };

Dann benutze es so

$('#myElement').disable(true);

0
2017-11-16 10:24



2018, ohne JQuery (ES6)

Alle deaktivieren input:

[...document.querySelectorAll('input')].map(e => e.disabled = true);

Deaktivieren input mit id="my-input"

document.getElementById('my-input').disabled = true;

Die Frage ist mit JQuery, es ist nur FYI.


0
2018-06-04 13:43



<html>
<body>

Name: <input type="text" id="myText">



<button onclick="disable()">Disable Text field</button>
<button onclick="enable()">Enable Text field</button>

<script>
function disable() {
    document.getElementById("myText").disabled = true;
}
function enable() {
    document.getElementById("myText").disabled = false;
}
</script>

</body>
</html>

-1
2017-09-26 10:22