Comment masquer une case à cocher HTML tout en affichant son libellé

Question

Je suis nouveau sur jQuery et j'ai essayé de comprendre comment utiliser le composant jQuery-ui Selectable comme alternative à un ensemble de cases à cocher.

http://jqueryui.com/demos/selectable/

Je pense que je pourrais le faire fonctionner si je peux trouver un moyen de cacher la case à cocher mais montrer encore son étiquette. (Je ne suis pas un expert HTML non plus). Est-il possible de faire cela?

Answer 1

Vous pouvez simplement utiliser les événements selecting et unselecting pour cela, par exemple:

$("#selectable").selectable({ 
    selecting: function(event, ui) { 
     $(ui.selecting).find(':checkbox').attr('checked', true); 
    }, 
    unselecting: function(event, ui) { 
     $(ui.unselecting).find(':checkbox').attr('checked', false); 
    } 
}); 

You can test it here, with the checkboxes visible to see it working et here's that same version with just some added styling to hide the checkboxes. Bien que, si vous faites des soumissions AJAX, check out the serialize demo qui montre que vous pouvez obtenir n'importe quelle valeur dérivée des éléments, il ne doit pas être un élément d'entrée réel.