Invoer in-/uitschakelen met jQuery?

of

$input.disabled = "disabled";

Wat is de standaardmanier? En omgekeerd, hoe schakel je een uitgeschakelde invoer in?

Antwoord 1, autoriteit 100%

jQuery 1.6+

Als u de eigenschap disabledwilt wijzigen, moet u de .prop()functie.

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

jQuery 1.5 en lager

De functie .prop()bestaat niet, maar .attr()doet hetzelfde:

Stel het uitgeschakelde kenmerk in.

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

Om opnieuw in te schakelen, is de juiste methode om .removeAttr()

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

In elke versie van jQuery

Je kunt altijd vertrouwen op het daadwerkelijke DOM-object en is waarschijnlijk iets sneller dan de andere twee opties als je maar met één element te maken hebt:

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

Het voordeel van het gebruik van de methoden .prop()of .attr()is dat je de eigenschap voor een aantal geselecteerde items kunt instellen.

Opmerking: in 1.6 Er is een .removeProp()Methode die veel oplaat als removeAttr(), maar het mag niet worden gebruikt op inheemse eigenschappen zoals 'disabled'fragmenteren uit de Documentatie:

Opmerking: Gebruik deze methode niet om inheemse eigenschappen zoals gecontroleerd, uitgeschakeld of geselecteerd te verwijderen. Dit zal het onroerend goed volledig verwijderen en, eenmaal verwijderd, kan niet opnieuw worden toegevoegd aan het element. Gebruik .PROP () om deze eigenschappen in te stellen in plaats daarvan.

Twijfel ik twijfel dat er veel legitieme toepassingen voor deze methode zijn, Booleaanse rekwisieten worden op zo’n manier gedaan dat u ze moet instellen in plaats van “ze verwijderen” zoals hun “attribuut” tegenhangers in 1.5

Antwoord 2, Autoriteit 2%

Gewoon omwille van Nieuwe Conventies & AMP; & AMP; het maken van het aanpasbaar naar voren (tenzij dingen drastisch veranderen met ECMA6 (????):

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

en

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

Antwoord 3

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

Soms moet u het formulierelement zoals input of textarea uitschakelen / inschakelen. JQuery helpt je om dit eenvoudig te maken met het instellen van uitgeschakeld attribuut naar “uitgeschakeld”.
Voor b.v.:

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

Om het uitgeschakelde element in te schakelen, moet u het “uitgeschakelde” kenmerk van dit element verwijderen of de tekenreeks leegmaken. Voor bijv.:

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

verwijs naar:http://garmoncheg.blogspot.fr/2011/07 /hoe-element-met.html-uitschakelen

Antwoord 4

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

of

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

Antwoord 5

Je kunt dit ergens globaal in je code zetten:

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

En dan kun je dingen schrijven als:

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

Antwoord 6

Als u alleen de huidige status wilt omkeren (zoals het gedrag van een schakelknop):

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

Antwoord 7

Er zijn veel manieren waarop u elk element kunt in-/uitschakelen :

Benadering 1

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

Benadering 2

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

Als je jQuery 1.7 of hoger gebruikt, gebruik dan prop(), in plaats van attr().

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

Als u een element wilt inschakelen, hoeft u alleen maar het tegenovergestelde te doen van wat u deed om het uit te schakelen. jQuery biedt echter een andere manier om een attribuut te verwijderen.

Benadering 1

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

Benadering 2

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

Benadering 3

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

Nogmaals, als je jQuery 1.7 of hoger gebruikt, gebruik dan prop(), in plaats van attr(). Dat is. Dit is hoe je elk element in- of uitschakelt met jQuery.

Antwoord 8

Update voor 2018:

JQuery is nu niet meer nodig en het is al een tijdje geleden dat document.querySelectorof document.querySelectorAll(voor meerdere elementen) bijna precies hetzelfde werk doen als $, plus meer expliciete getElementById, getElementsByClassName, getElementsByTagName

Eén veld van de klasse “input-checkbox” uitschakelen

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

of meerdere elementen

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

Antwoord 9

U kunt de jQuery prop()-methode gebruiken om formulierelementen in of uit te schakelen of dynamisch te besturen met jQuery. Voor de methode prop() is jQuery 1.6 en hoger vereist.

Voorbeeld:

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

Antwoord 10

dit werkt voor mij

$("#values:input").attr("disabled",true);
$("#values:input").attr("disabled",false);

Antwoord 11

Uitschakelen:

$('input').attr('readonly', true); // Disable it.
$('input').addClass('text-muted'); // Gray it out with bootstrap.

Inschakelen:

$('input').attr('readonly', false); // Enable it.
$('input').removeClass('text-muted'); // Back to normal color with bootstrap.

Antwoord 12

True uitschakelen voor invoertype:

In het geval van een specifiek invoertype (Bijv. Teksttype invoer)

$("input[type=text]").attr('disabled', true);

Voor alle typen invoer

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

Antwoord 13

Zo gebruiken,

$( "#id" ).prop( "disabled", true );
 $( "#id" ).prop( "disabled", false );

Antwoord 14

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

Antwoord 15

Ik heb @gnarf antwoord gebruikt en toegevoegd als functie

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

Gebruik dan zo

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

Antwoord 16

2018, zonder JQuery (ES6)

Alle inputuitschakelen:

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

Schakel inputuit met id="my-input"

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

De vraag is metJQuery, het is gewoon ter informatie.

Antwoord 17

Benadering 4(dit is een uitbreiding van wild coder-antwoord)

txtName.disabled=1     // 0 for enable

<input id="txtName">

jQuery("#inputFieldId").css({"pointer-events":"none"})

jQuery("#inputFieldId").css({"pointer-events":""})

$('#someselectElement').selectmenu().selectmenu('disable').selectmenu('refresh', true);
$('#someTextElement').textinput().textinput('disable');

$('#someselectElement').selectmenu().selectmenu('enable').selectmenu('refresh', true);
$('#someTextElement').textinput('enable');