1 pièce(s) jointe(s)
Changer attribut champs dynamique
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.
Pièce jointe 550816
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:
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:
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
