Activer / désactiver l'attribut d'entrée désactivé à l'aide de jQuery

192

Voici mon code:

$("#product1 :checkbox").click(function(){
    $(this)
        .closest('tr') // Find the parent row.
            .find(":input[type='text']") // Find text elements in that row.
                .attr('disabled',false).toggleClass('disabled') // Enable them.
                .end() // Go back to the row.
            .siblings() // Get its siblings
                .find(":input[type='text']") // Find text elements in those rows.
                .attr('disabled',true).removeClass('disabled'); // Disable them.
});

Comment basculer .attr('disabled',false);?

Je n'arrive pas à le trouver sur Google.

Tommy Arnold
la source
Une raison pour laquelle vous ne pouvez pas utiliser la propriété disabled du champ? $("input").get(0).disabled = isFalse;// jsfiddle.net/uAfhj
Shanimal
J'ai trouvé le plugin DependsOn que vous pourriez trouver utile
Onshop

Réponses:

455
$('#el').prop('disabled', function(i, v) { return !v; });

La .prop()méthode accepte deux arguments:

  • Nom de la propriété (désactivé, coché, sélectionné) tout ce qui est vrai ou faux
  • La valeur de la propriété peut être:
    • ( vide ) - renvoie la valeur actuelle.
    • boolean (true / false) - définit la valeur de la propriété.
    • function - Est exécuté pour chaque élément trouvé, la valeur renvoyée est utilisée pour définir la propriété. Il y a deux arguments passés; le premier argument est l' indice (0, 1, 2, augmente pour chaque élément trouvé). Le deuxième argument est la valeur actuelle de l'élément (vrai / faux).

Donc dans ce cas, j'ai utilisé une fonction qui m'a fourni l'index (i) et la valeur actuelle (v), puis j'ai renvoyé l'opposé de la valeur actuelle, donc l'état de la propriété est inversé.

Arne
la source
2
Vote positif comme (je crois) .prop () est la bonne façon de faire cela et a été ajouté précisément dans le but de définir des choses comme disabled = "disabled" + its elegant
Morvael
5
Qu'est-ce que iet v?
Matt R
@MattR J'ai ajouté une courte explication.
Arne
C'est une excellente réponse!
LeBlaireau
6
En $('#el').prop('disabled', (i, v) => !v);
guise de
101

Je suppose que pour obtenir une comparabilité complète du navigateur, il disabledfaut définir la valeur disabledou être supprimé!
Voici un petit plugin que je viens de faire:

(function($) {
    $.fn.toggleDisabled = function() {
        return this.each(function() {
            var $this = $(this);
            if ($this.attr('disabled')) $this.removeAttr('disabled');
            else $this.attr('disabled', 'disabled');
        });
    };
})(jQuery);

Exemple de lien .

EDIT: mise à jour de l'exemple de lien / code pour maintenir la chaînabilité!
EDIT 2:
Basé sur le commentaire de @lonesomeday, voici une version améliorée:

(function($) {
    $.fn.toggleDisabled = function(){
        return this.each(function(){
            this.disabled = !this.disabled;
        });
    };
})(jQuery);
ifaour
la source
28
Cela peut fonctionner, mais cela va être lent, car vous créez constamment de nouveaux objets jQuery. $.fn.toggleDisabled = function(){ return this.each(function(){ this.disabled = !this.disabled; });}est tout ce dont vous avez besoin.
Lonesomeday
@lonesomeday: J'allais publier ceci mais j'ai tendance à penser que ce n'est pas la bonne façon de définir / annuler l' disabledattribut. Quoi qu'il en soit, si vous pouvez confirmer qu'il s'agit d'une solution multi-navigateurs ... je mettrai à jour ma réponse.
ifaour
2
Pour tous les futurs googleurs, cette solution fonctionne aussi bien pour l'attribut «requis».
skybondsor
propest la meilleure méthode depuis 1.6 comme le dit Arne.
Ciro Santilli 郝海东 冠状 病 六四 事件 法轮功
20
    $ ('# case à cocher'). cliquez sur (fonction () {
        $ ('# soumettre'). attr ('désactivé',! $ (ceci) .attr ('vérifié'));
    });

Присяжный Дмитрий
la source
2
Remarque: fonctionne uniquement sous jQuery 1.6. Utilisez .prop () au lieu de attr () sur les deux occurrences pour récupérer les valeurs booléennes. Voir api.jquery.com/prop
Manuel Arwed Schmidt
@ManuelArwedSchmidt Pas bien. Vous pensez ne pas comprendre la différence entre attret propencore.
baburao le
6

Une autre option simple qui se met à jour en un clic de la case à cocher.

HTML:

<input type="checkbox" id="checkbox/>
<input disabled type="submit" id="item"/>

jQuery:

$('#checkbox').click(function() {
    if (this.checked) {
        $('#item').prop('disabled', false); // If checked enable item       
    } else {
        $('#item').prop('disabled', true); // If checked disable item                   
    }
});

En action: lien

inégal
la source
9
Débarrassez-vous du ifbloc avec$('#item').prop('disabled', this.checked);
Naeem Sarfraz
2

Un peu plus tard, et grâce à @arne, j'ai créé cette petite fonction similaire pour gérer où l'entrée doit être désactivée ET masquée, ou activée ET affichée:

function toggleInputState(el, on) {
  // 'on' = true(visible) or false(hidden)
  // If a field is to be shown, enable it; if hidden, disable it.
  // Disabling will prevent the field's value from being submitted
  $(el).prop('disabled', !on).toggle(on);
}

Ensuite, un objet jQuery (tel que $ ('input [name = "something"]')) est simplement commuté en utilisant:

toggleInputState(myElement, myBoolean)
eon
la source
1

C'est assez simple avec la syntaxe de rappel de attr:

$("#product1 :checkbox").click(function(){
  $(this)
   .closest('tr') // find the parent row
       .find(":input[type='text']") // find text elements in that row
           .attr('disabled',function(idx, oldAttr) {
               return !oldAttr; // invert disabled value
           })
           .toggleClass('disabled') // enable them
       .end() // go back to the row
       .siblings() // get its siblings
           .find(":input[type='text']") // find text elements in those rows
               .attr('disabled',function(idx, oldAttr) {
                   return !oldAttr; // invert disabled value
               })
               .removeClass('disabled'); // disable them
});
seul jour
la source