Désactivation de boutons précédent

**Bensljul** · 10/01/2019, 09h26

Bonjour à tous,

Je suis toujours sur mon générateur de formulaire que j'essaye d'améliorer, et là je voudrais désactiver les boutons de création tant que l'on a pas appuyer sur les boutons OK ou annuler.

Je m'explique : j'ai un span pour les boutons de créations

Code html :

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

1
2
3
4
5
6
7
<div id="crea_form">
		<p>Utilisez ces boutons pour créer votre formulaire</p>
		<span id="btn_crea">
			<button id="btn_label">Label</button>
			<button id="btn_txt">Zone de texte</button>
			<button id="btn_btn">Bouton</button>
		</span>

et je voudrais que lorsque que je clique sur un de ces boutons, tous les boutons du span se désactivent ^^ du coup j'ai codé ca :

#HTML :

Code html :

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

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
34
<body>
	<div id="form">
 
	</div>
	<div id="crea_form">
		<p>Utilisez ces boutons pour créer votre formulaire</p>
		<span id="btn_crea">
			<button id="btn_label">Label</button>
			<button id="btn_txt">Zone de texte</button>
			<button id="btn_btn">Bouton</button>
		</span>
		<span id="label">
				<label>Label : </label>
				<input type="text">
				<button class="ok">OK</button>
				<button class="cancel">Annuler</button>
		</span>
		<span id="txt">
				<label>Zone de texte : </label>
				<input type="text">
				<button class="ok">OK</button>
				<button class="cancel">Annuler</button>
		</span>
		<span id="btn">
				<label>Bouton : </label>
				<input type="text">
				<button class="ok">OK</button>
				<button class="cancel">Annuler</button>
		</span>
		<span id="help">
		</span>
	</div>
 
</body>

#JQUERY :

Code :

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

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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
$(document).ready(function(){
 
	//définition des variables
 
	var $label = $('#btn_crea #btn_label'),
			$crea = $('#btn_crea'),
			$ok = $('.ok'),
			$cancel = $('.cancel'),
			$help = $('#crea_form #help'),
			$crea_btn = $('#btn_crea button'),
			$txt = $('#btn_crea #btn_txt'),
			$btn = $('#btn_crea #btn_btn'),
			$val_label = $('#label input'),
			$val_txt = $('#txt input'),
			$val_btn = $('#btn input'),
			val_label = '',
			val_txt = '',
			val_btn = '',
			Focus,
			sel_val = '';
 
	//Affichages des zones de champs correspond aux boutons de la zone
	//de création
 
	$crea_btn.on('click',function(){ //écoute du click
		$crea_btn.prop('disable',true);
		var id = this.id;	//récupération de l'id de l'élément cliqué
		 //désactivation des bouton de créations
		//Actions en fonction de l'élément clické
		if (id == 'btn_label'){
 
			$crea.css('border-bottom','2px solid black');
			$help.load("btn_label.txt");
			$('#label').fadeIn('slow');
			$help.fadeIn('slow');
		}
		else if (id == 'btn_txt'){
 
			$crea.css('border-bottom','2px solid black');
			$help.load("btn_txt.txt");
			$('#txt').fadeIn('slow');
			$help.fadeIn('slow');
		}
		else if (id == 'btn_btn'){
 
			$crea.css('border-bottom','2px solid black');
			$help.load("btn_btn.txt");
			$('#btn').fadeIn('slow');
			$help.fadeIn('slow');
		}
 
	});
 
	$ok.on('click',function(){ //écoute de l'évènement de click
		var ok = $(this).parent().attr("id"); // récupération de l'id de l'élément parent du bouton "OK"
		//actions effectuées suite au click sur le bouton et en fonction de la valeur de l'id
		if ( ok == 'label'){
			val_label = $val_label.val();
			sel_val = '"'+val_label+'"';
			//alert(val_label);
			$('#form').append('<div id="'+val_label+'"><span>'+val_label+'</span></div>');
			$('#help').remove();
			$('#help').fadeOut('slow');
			$('#label').fadeOut('slow',function(){
				$crea.css('border-bottom','');
				});
		}
		else if (ok == 'txt'){
			val_txt = $val_txt.val();
			$('#form [id="'+val_label+'"]').append('<input id="'+val_txt+'" type="texte" >');
			$('#help').fadeOut('slow');
			$('#txt').fadeOut('slow',function(){
				$crea.css('border-bottom','');
				});
 
		}
		else if (ok == 'btn'){
			val_btn = $val_btn.val();
			$('#form').append('<button>'+val_btn+'</button>');
			$('#help').fadeOut('slow');
			$('#btn').fadeOut('slow',function(){
				$crea.css('border-bottom','');
				});
		}
	});
 
	$cancel.on('click',function(){
		var cancel = $(this).parent().attr("id");
 
		if ( cancel == 'label'){
			val_label = $val_label.val('');
			$('#help').fadeOut('slow');
			$('#label').fadeOut('slow',function(){
				$crea.css('border-bottom','');
				});
		}
		else if (cancel == 'txt'){
			val_txt = $val_txt.val('');
			$('#help').fadeOut('slow');
			$('#txt').fadeOut('slow',function(){
				$crea.css('border-bottom','');
				});
 
		}
		else if (cancel == 'btn'){
			val_btn = $val_btn.val('');
			$('#help').fadeOut('slow');
			$('#btn').fadeOut('slow',function(){
				$crea.css('border-bottom','');
				});
		}
	});
 
 
});

mais ca marche po pour la désactivation XD

je vous remercie par avance

**Bensljul** · 10/01/2019, 11h09

J'ai trouver ^^ fallait mettre disabled et non disable XD

Désactivation de boutons précédent

jQuery

Vue hybride

Discussions similaires

Partager

Partager