Changer attribut champs dynamique

**novice77H** · 30/03/2020, 15h00

bonjour à tous
Je demande votre aide.

Je crée dynamiquement des champs et je souhaiterai changer l'attribut de certains champs en fonction du choix de la selectbox.
Par exemple si je sélectionne opt2 je souhaiterai que field 1 et field 2 soient disabled et si je choisi opt1 que field1 et field2 reste actif.
Nom : Sans tddditre.png
Affichages : 108
Taille : 1,6 Ko

Nom : Sans tddditre.png
Affichages : 108
Taille : 1,6 Ko

J'aimerai que les changements se fassent uniquement sur la ligne concernée et non sur toutes les lignes. A vrai dire j'etai arrivé à le faire mais le changement se faisait sur toutes les lignes, ce qui ne m'arrange pas.

Mon code

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
35
36
37
38
39
40
41
42
43
44
45
46
<!DOCTYPE html>
<html lang="en">
<head>
  <title>test</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  <link rel="stylesheet" href="style.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>
 
	<nav class="navbar navbar-expand-sm navbar-custom">	  
	  <div class="navbar-collapse collapse" id="navbarCustom">
		  <ul class="navbar-nav">
			<li class="nav-item">
				<a class="nav-link" href="#">onglet1</a>
			</li>
			<li class="nav-item dropdown">
			  <a class="nav-link" href="#" id="navbardrop" data-toggle="dropdown">onglet2</a>
			  </a>
			  <div class="dropdown-menu">
				<a class="dropdown-item" href="#">link1</a>
				<a class="dropdown-item" href="#">link2</a>
				<a class="dropdown-item" href="#">link3</a>
			  </div>
			</li>
		  </ul>
 
		</div>
	</nav>
 
	<div class="container">
		<div class="form-group">
			<form name="azer" id="azer">
				<div class="table-responsive">
					<table class="table table-condensed" id="dynamic_field">
 
					</table>
				</div>
			</form>
		</div>	
	</div>
</body>
</html>

mon javascript

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
<script type="text/javascript" language="javascript">
 
	$(document).ready(function(){
 
		var i=1;
		$('#dynamic_field > tr').remove();
		$('#dynamic_field').append('<tr><td style="width: 17%"><select type="text" name="field1[]" class="form-control" placeholder="Type controle" required ><option value="opt1">opt1</option><option value="opt2">opt2</option></select></td><td style="width: 14%"><input type="text" name="field2[]" class="form-control" placeholder="field2" required /></td><td style="width: 16%"><input type="text" name="field3[]" class="form-control" placeholder="field3" required /></td><td><button type="button" name="plus" id="plus" class="btn btn-primary btn_plus" ></i></button></td></tr>');			
 
		$(document).on('click', '.btn_plus', function(){
			i++;
			$('#dynamic_field').append('<tr id="row'+i+'"><td style="width: 17%"><select type="text" name="field1[]" class="form-control" placeholder="Type controle" required ><option value="opt1">opt1</option><option value="opt2">opt2</option></select></td><td style="width: 14%"><input type="text" name="field2[]" class="form-control" placeholder="field2" required /></td><td style="width: 16%"><input type="text" name="field3[]" class="form-control" placeholder="field3" required /></td><td><button type="button" name="remove" id="'+i+'" class="btn btn-danger btn_remove" ></i></button></td></tr>');
		});
 
		$(document).on('click', '.btn_remove', function(){
			var button_id = $(this).attr("id"); 
			$('#row'+button_id+'').remove();
		});	
 
	});
 
 
</script>

Besoin d'aide

Merci d'avance

Cordialement

**Beginner.** · 30/03/2020, 16h21

Salut,

Envoyé par novice77H

Je crée dynamiquement des champs et je souhaiterai changer l'attribut de certains champs en fonction du choix de la selectbox.
Par exemple si je sélectionne opt2 je souhaiterai que field 1 et field 2 soient disabled et si je choisi opt1 que field1 et field2 reste actif.
Nom : Sans tddditre.png
Affichages : 108
Taille : 1,6 Ko

J'aimerai que les changements se fassent uniquement sur la ligne concernée et non sur toutes les lignes. A vrai dire j'etai arrivé à le faire mais le changement se faisait sur toutes les lignes, ce qui ne m'arrange pas.

Vous voulez cela pour toutes les lignes ? C'est-à-dire le select de chaque ligne met field 1 et field 2 de la même ligne (mais pas les field 1 et field 2 des autres lignes) en disabled, c'est bien ça ?

**novice77H** · 30/03/2020, 16h28

Oui Beginner. c'est exactement ça. Les changements se font uniquement sur la ligne et n'impacte pas les autres.

Merci de prendre le temps de regarder.

**Beginner.** · 30/03/2020, 17h56

Je ne connais pas vraiment jQuery mais j'ai quand même essayé de le faire le plus possible en jQuery, le code que j'ai testé ici : https://jsbin.com/hemawesuyu/edit?js,output fonctionne bien...

J'ai ajouté cette fonction :

Code javascript :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$("#dynamic_field").on('change', function (e) {
 
        if (e.target.tagName.toLowerCase() != "select") return;
 
        var valueSelected = e.target.value;
        var row_target = e.target.parentElement.parentElement;
 
        if (valueSelected == "opt1") {
            $("input", row_target).removeAttr('disabled');
        }
        else {
            $("input", row_target).attr('disabled', 'disabled');
        }
 
    });

J'ai utilisé le principe de la délégation (un seul gestionnaire d'évènement pour tous les select de la table)...

**novice77H** · 30/03/2020, 18h32

Grand merci pour votre aide. Ca marche excatement comme je veux.

Changer attribut champs dynamique

jQuery

Discussions similaires

Partager

Partager