[jquery] checkbox control

[passasooz]

Ciao a tutti

avrei bisogno di una mano a risolvere un problema, ho dei checkbox (stilizzati con bootstrap) che vorrei far funzionare come dei radio, l'unico problema è che non ci riesco.

In poche parole, quando si clicca uno si deve attivare (quindi si colora e cambia anche l'icona associata) ergo si checka, quando clicco su un altro invece, se c'è già un check attivo quest'ultimo si deve disattivare ed attivare quello cliccato (come i radio in sostanza)

purtroppo non riesco a farlo, dunque ho postato su jsfiddle il codice e l'url è questo

https://jsfiddle.net/passasooz/o8o3jykj/

inoltre vi posto anche la pagina html così potrete capire meglio ciò che devo fare, non posso utilizzare i radio in quanto la struttura della pagina non lo permette (considerando che sto utilizzando bootstrap)

http://www.francescopassanante.com/p...er_artist.html

Spero che qualcuno possa aiutarmi, grazie mille!

[ciro78]

bootstrap fa uso di radio tu perchè non puoi?

[cavicchiandrea]

Ciclo each sula classe che identifica i checkbox, che li forzi tutti a checked false e allo stesso momento imposta solo quello premuto (this) a true

[passasooz]

bootstrap fa uso di radio tu perchè non puoi?

si certo, volevo utilizzare i radio buttons però come bootstrap li struttura non vanno bene per la mia struttura di pagina. ho giàprovato infatti.




cavicchiandrea non ho capito, allora considera che quel js non l'ho scritto io ma era parte dello script che ho trovato online per realizzare i check buttons ho provato a metterci mano risettando i check tutti a checked false e poi solo quello premuto a checked true però non funzionava lo stesso perchè poi c'era il problema dei colori, ovvero non tornavano a btn-default gli altri ma rimanevano a btn-success (mi riferisco a quelli che dovevano uncheccarsi) inoltre ho notato nella consolle di chrome con ispeziona elemento che a nessun <input> viene attribuita l attributo checked (nemmeno a quelli cliccati)

[cavicchiandrea]

Non so come spiegartelo meglio, per il discorso delle classi bootstrap oltre a forzare il checked a false puoi cambiare le classi

[passasooz]

una cosa così praticamenter?

$('.button-checkbox').each(function () {            var $widget = $(this),
                $button = $widget.find('button'),
                $checkbox = $widget.find('input:checkbox'),
                color = $button.data('color'),
                settings = {
                    on: {
                        icon: 'glyphicon glyphicon-check'
                    },
                    off: {
                        icon: 'glyphicon glyphicon-unchecked'
                    }
                };


            $checkbox.each(function(){
              $checkbox.prop('checked',false);
              $(this).prop('checked',true);
            });
            $button.on('click', function () {
                $checkbox.prop('checked', !$checkbox.is(':checked'));
                $checkbox.triggerHandler('change');
                updateDisplay();
            });
            $checkbox.on('change', function () {
                updateDisplay();
            });
            function updateDisplay() {
                var isChecked = $checkbox.is(':checked');
                $button.data('state', (isChecked) ? "on" : "off");
                $button.find('.state-icon')
                    .removeClass()
                    .addClass('state-icon ' + settings[$button.data('state')].icon);
                if (isChecked) {
                    $button
                        .removeClass('btn-default')
                        .addClass('btn-' + color + ' active');
                }
                else {
                    $button
                        .removeClass('btn-' + color + ' active')
                        .addClass('btn-default');
                }
            }
            function init() {
                updateDisplay();
                if ($button.find('.state-icon').length == 0) {
                    $button.prepend('<i class="state-icon ' + settings[$button.data('state')].icon + '"></i> ');
                }
            }
            init();
        });

[cavicchiandrea]

Pensavo a qualcosa di semplice, ma se funziona va benissimo