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

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.

$('#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é.

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

    $ ('# case à cocher'). cliquez sur (fonction () {
        $ ('# soumettre'). attr ('désactivé',! $ (ceci) .attr ('vérifié'));
    });

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

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)

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