Discussion :

[loic20h28]

Bonjour tout le monde,

Je suis actuellement entrain de faire un formulaire pour mon travail et j'utilise ToolTip afin d'afficher des infoBulles avec une présentation personnalisée.
Mon problème : Lorsque je souhaite afficher une infoBulle sur une case à cocher qui est grisé, la présentation n'est pas prise en compte

Donc je me demande si ce que je veux faire est possible ? Si oui, qu'elle la manière de le faire s'il vous plaît ?

Voici mon

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<div class="block_caseCocher">
 <input name="input_caseCocher" checked="true" title="Info-Bulle - Tester." disabled="disabled" type="checkbox">
 <label class="label_caseCocher">Tester</label>
</div>

Voici mon code Jquery tooltip :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
$("div.block_caseCocher input[name=input_caseCocher[title]").tooltip({ 
	position: 
       { 
	        my: 'center bottom', 
		at: 'right top-10'
	}
});
$("div.block_caseCocher input[name=input_caseCocher[title]").tooltip('option', 'tooltipClass', "top");

Merci par avance.

[Toufik83]

ce selcteur n'est pas correcte :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$("div.block_caseCocher input[name=input_caseCocher[title]")

tu cherches à cibler l'input :name="input_caseCocher", le selecteur doit être écrit ainsi :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$("div.block_caseCocher input[name=input_caseCocher]")

[loic20h28]

En effet, j'ai fait une faute de frappe :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
$("div.block_caseCocher input[name=input_caseCocher]").tooltip({ 
	position: 
       { 
	        my: 'center bottom', 
		at: 'right top-10'
	}
});
$("div.block_caseCocher input[name=input_caseCocher]").tooltip('option', 'tooltipClass', "top");

Mais cela ne résous en rien mon problème.

Si je modifie le HTML de la sorte tout en gardant le jquery ci-dessus :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<div class="block_caseCocher">
<!-- J'ai retiré le "disabled=disabled" -->
 <input name="input_caseCocher" checked="true" title="Info-Bulle - Tester." type="checkbox">
 <label class="label_caseCocher">Tester</label>
</div>

Cela fonctionne parfaitement.

Par contre si dans le HTML je met ma checkbox avec 'disabled="disabled"', cela ne fonctionne plus!!

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<div class="block_caseCocher">
 <input name="input_caseCocher" checked="true" title="Info-Bulle - Tester." type="checkbox" disabled="disabled">
 <label class="label_caseCocher">Tester</label>
</div>

Merci par avance.

[Toufik83]

apparaimment l'info bull n'est jamais lancé sur un élément disabled.
une solution consiste a ne pas utiliser la propriété disabled, et utiliser la propriété opacity.
tout d'abord au niveau du css tu ajoute :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
.block_caseCocher input[name="input_caseCocher"] {
  opacity:.5;
}

puis on gère le clique selon la propriété opacity de l'input : (tu peux interdire le clique sur l'input si l'opacité est < 1 ...)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
$('input[name="input_caseCocher"]').click(function(){
	$(this).css('opacity')<1
  	?$(this).css('opacity',1)
    :$(this).css('opacity','.5');
});

[loic20h28]

Bonjour,

En effet avec :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
.block_caseCocher input[name="input_caseCocher"] {
  opacity:.5;
}

Cela grise bien la case à cocher.

Ensuite en jquery, pour interdire le clique, j'ai fait cela :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
$('input[name="input_caseCocher"]').click(function(){
		if($(this).css('opacity')<1) {
			$(this).prop('checked', true);
			$(this).off();
		} else {
			$('p').show();
		}
	});

Le problème est le suivant :
je clique une première fois sur la case à cocher => cela se passe bien c'est à dire que la case reste cochée et grisé.
Je clique une deuxième fois sur la case à cocher => la case se décoche.... Cela ne repasse pas à nouveau dans l'événement du click.

Je vois vraiment pas pourquoi cela bloque!!

[Toufik83]

bonjour,
1- ce que je voulais dire par 'INTERDIRE LE CLIQUE', c'est de ne pas permettre a l'utilisateur de cliquer sur un input qui est désactivé.
est ce que dans ton cas l'utilisateur peut cliquer sur l'élément input[name='input_caseCocher'] même si'il est désactivé?
2- $("#id_element").off() est une fonction qui annule tout les événement relatifs a #id_element (clique, mouseenter, mouseover...), enlève là du block else pour garder l’événement clique sur l'input[name='input_caseCocher'].