Changer attribut champs dynamique par Alex777f - page 1

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.

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.

<!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>

<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

Changer attribut champs dynamique

Changer attribut champs dynamique

Supprimer

Modérer

Signaler le message aux modérateurs