Jquery - attr() et removeAttr() - disabled sur un button

Version imprimable

Bonjour à tous,

Je cherche à développer 2 boutons où le premier modifie le deuxième tout tout particulièrement le premier doit modifier l'attribut disabled="disabled" du second.

J'ai trouvé un post : http://www.developpez.net/forums/d71...-d-formulaire/ qui traite un peu de ce sujet.

Bon concernant mon code (écrit sou Symfony donc utilisant twig) :

Le HTML

Code:

1
2
3
4
5
6
<button type="button" class="btn btn-default btn-xs" onclick="putOnline({{ association.id }})" title="Mettre en ligne">
      <span name="actionBtn" id="{{ association.id }}" class="fa fa-play"></span>
</button> 
<button type="button" name="viewBtn" id="{{ association.id }}" class="btn btn-default btn-xs" onClick="window.location.href='{{ path('geograph_progasso_fiche', {'id': association.id }) }}'" title="Voir en ligne" disabled="disabled">
      <span class="fa fa-eye"></span>
</button>

Le javascript :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
function putOnline(id){
            // Quel est l'état du champ
            var action = $('span[name="actionBtn"]#'+id).attr('class');
                $.ajax({
                    type: 'get',
                    url: Routing.generate('putOnline', {'id': id}),
                    beforeSend: function(){
 
                    },
                    success: function(){
                       if (action == "fa fa-play"){
                           $('span[name="actionBtn"]#'+id).attr('class', 'fa fa-stop');
                           $('button[name="viewBtn"]#'+id).removeAttr('disabled');
 
                           $('#online').text(Number($('#online').text()) + 1);
                           $('#offline').text(Number($('#offline').text()) - 1);
                       } else {
                           $('span[name="actionBtn"]#'+id).attr('class', "fa fa-play");
                           $('button[name="viewBtn"]#'+id).attr('disabled', "disabled");
 
                           $('#online').text(Number($('#online').text()) - 1);
                           $('#offline').text(Number($('#offline').text()) + 1);
                       }
                    }
                })   
        }

Je parviens à modifier le premier bouton et notamment son icone mais n'arrive pas à modifier l'attribut disabled...

Merci par avance pour vos réponses.

Essaye

Code:

1
2
$('button[name="viewBtn"]#'+id).prop('disabled', "true");
$('button[name="viewBtn"]#'+id).prop('disabled', "false");

18/09/2015, 16h56
olifil

Merci pour la réponse, mais cela ne fonctionne pas.

Je viens de controler avec

Code:

$('button[name="viewBtn"]#'+id+" span").text('ok');

Pour controler si l'erreur ne vient pas de la sélection de l'élément mais non plus....
18/09/2015, 17h02
SpaceFrog

http://jsfiddle.net/v9L9ew5r/
18/09/2015, 20h32
danielhagnoul

Citation:

$('button[name="viewBtn"]#'+id).

:calim2:

Un ID doit être unique dans la page web, donc : $('#'+id1) et $('#'+id2), la valeur de id2 doit être différente de celle d'id1.
19/09/2015, 09h23
olifil

Citation:

Envoyé par SpaceFrog

http://jsfiddle.net/v9L9ew5r/

J'ai regardé ça et effectivement comme ça s'est fonctionnel. Mais je n'arrive pas directement à l'inclure dans mon code.

Je verrai ça plus en détail dés lundi.
19/09/2015, 09h33
olifil
Citation:

Envoyé par danielhagnoul

:calim2:

Un ID doit être unique dans la page web, donc : $('#'+id1) et $('#'+id2), la valeur de id2 doit être différente de celle d'id1.

Mes boutons sont présents à de multiples reprise dans un tableau. Ils sont itérés automatiquement depuis une boucle {% for %} de twig.

L'identifiant est selon moi bien unique puisque je différencie le bouton de 2 manières :
- name = "viewBtn" ou "actionBtn"
- variable id dont l'id est donné par la boucle.
L'identification de mes boutons s'effectue donc sur la base du nom du bouton ainsi que sur l'id du composant dans la boucle.

Mon code modifie correctement le figuré du premier (celui qui est cliqué "actionBtn") en appliquant une classe Bootstrap différente soit "fa fa-play" soit "fa fa-stop". Mais sur le second je n'arrive à modifier que la balise <span> et non le bouton directement.
19/09/2015, 09h46
danielhagnoul

Amélioration de l'exemple de SpaceFrog : http://jsfiddle.net/v9L9ew5r/3/.

Comme il le dit lui-même ci-dessus, on doit utiliser prop() pour les attributs booléens et un ! suffit.

Merci à tous pour vos réponses.

Malgré vos apports je n'ai pas réussi à modifier la propriété "disabled" du second bouton.

J'ai pu modifier le bouton (maître) sans problème mais ne suis arrivé à modifier aucun attribut ou propriété du second (slave). J'ai malgré tout réussi à modifier la classe de la balise span incluse.

J'ai donc revu mon code en ne modifiant plus le bouton mais en le supprimant et cette solution marche (preuve que l'identification du bouton est bonne). Elle n'est pas heureuse mais le résultat est le même.

Donc le code :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div id="{{ association.id }}" class="btn-group">
                                {% if association.publication == 1 %}
                                    <button name="action" id="{{ association.id }}" action="off" class="btn btn-default btn-xs" title="Mettre hors ligne">
                                        <span name="action" id="{{ association.id }}" class="fa fa-stop"></span>
                                    </button>
                                    <button name="view" id="{{ association.id }}" class="btn btn-default btn-xs" title="Voir en ligne" onClick="window.location.href='{{ path('geograph_progasso_fiche', {'id': association.id }) }}'">
                                        <span name="view" id="{{ association.id }}" class="fa fa-eye"></span>
                                    </button>
                                {% else %}
                                    <button name="action" id="{{ association.id }}" action="on" class="btn btn-default btn-xs" title="Mettre en ligne">
                                        <span name="action" id="{{ association.id }}" class="fa fa-play"></span>
                                    </button> 
                                {% endif %}
                                </div>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
$('button[name="action"]').on('click', function(event){
 
            var button = $(this);
            var action = $(this).attr('action');
            var id = $(this).attr('id');
 
            switch(action){
                case 'off':
                    $('button[name="action"]#'+id+' span').attr('class', 'fa fa-play');
                    $(this).attr('action', 'on');
                    $("button").remove("[name='view']#"+id);
                    $('#online').text(Number($('#online').text()) - 1);
                    $('#offline').text(Number($('#offline').text()) + 1);
                    break;
                case 'on':
                    $('button[name="action"]#'+id+' span').attr('class', 'fa fa-stop');
                    $(this).attr('action', 'off');
                    $("#"+id).append('<button name="view" id="' + id + '" class="btn btn-default btn-xs" title="Voir en ligne" onClick="window.location.href=\'' + Routing.generate('geograph_progasso_fiche',{'id': id}) + '\'"><span name="view" id="' + id + '" class="fa fa-eye"></span></button>')
                    $('#online').text(Number($('#online').text()) + 1);
                    $('#offline').text(Number($('#offline').text()) - 1);
                    break;
            }
            $.ajax({
                type: 'get',
                url: Routing.generate('putOnline', {'id': id}),
                beforeSend: function(){
 
                },
                success: function(){
 
                },
            });
        })