Activer ou désactiver l’atsortingbut d’entrée à 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 méthode .prop() accepte deux arguments:

  • Nom de la propriété (désactivé, coché, sélectionné) tout ce qui est vrai ou faux
  • 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’ index (0, 1, 2, augmente pour chaque élément trouvé). Le second argument est la valeur actuelle de l’élément (true / false).

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

Je suppose que pour obtenir la comparabilité complète du navigateur, la valeur disabled doit être disabled ou supprimée!
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: mis à jour l’exemple de lien / code pour maintenir la chaine!
EDIT 2:
Basé sur le commentaire @lonesomeday, voici une version améliorée:

 (function($) { $.fn.toggleDisabled = function(){ return this.each(function(){ this.disabled = !this.disabled; }); }; })(jQuery); 

     $ ('# checkbox') Cliquez sur (function () {
         $ ('# submit'). attr ('disabled',! $ (this) .attr ('checked'));
     })

Un peu plus tard, et grâce à @arne, j’ai créé cette petite fonction similaire pour gérer l’emplacement 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 object jQuery (tel que $ (‘input [name = “quelquechose”]’)) est simplement commuté en utilisant:

 toggleInputState(myElement, myBoolean) 

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

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

HTML:

  

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