i have a table from array in php so i put select option that have javascript to control disable/enable, .my problem is , javascript only working at 1st row of table..and the other rows are not working..can somebody help me with this thank you in advance...my code as :
$(document).ready(function() {
$('#Status1').change(function() {
if (($(this).val() === 'T') || ($(this).val() === 'M')) {
$(‘#uia’).attr('disabled', 'disabled');
} else {
$(‘#uia’).attr('disabled', false);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="Status1" name="Status1[]">
<option value="T" >PILIHAN 1</option></option>
<option value="M" >PILIHAN 2</option></option>
<option value="S" >PILIHAN 3</option></option>
</select>
<select id="uia" name="uia[]">
<option value="E" >PILIHAN 1</option></option>
<option value="D" >PILIHAN 2</option></option>
<option value="K" >PILIHAN 3</option></option>
</select>
</div>
first of all you have some errors in your syntax.
<option value="T" >PILIHAN 1</option></option>
).'
instead of ’
).As @ADyson has noticed, use .prop( propertyName, value )
instead of .attr( attributeName, value )
for disabling and enabling elements.
$('#Status1').change(function(){
if(($(this).val() === 'T') || ($(this).val() === 'M')){
$('#uia').prop('disabled', 'disabled');
}else{
$('#uia').prop('disabled', false);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="Status1" name="Status1[]" >
<option value="T" >PILIHAN 1</option>
<option value="M" >PILIHAN 2</option>
<option value="S" >PILIHAN 3</option>
</select>
<select id="uia" name="uia[]" >
<option value="E" >PILIHAN 1</option>
<option value="D" >PILIHAN 2</option>
<option value="K" >PILIHAN 3</option>
</select>
Note that this doesn't disable the #uia
element on load.
To achieve this you could set the #uia
element to disabled by default or add an onload event to the element.
</div>
<tbody>
<?php do {?>
<?php $Sellcount++ ; ?>
<tr>
<script type="text/javascript">
$(document).ready(function() {
$('#Status1').change(function(){
if(($(this).val() === 'T') || ($(this).val() === 'M')){
$('#uia').attr('disabled', 'disabled');
}else{
$('#uia').attr('disabled', false);
}
});
});
</script>
<td clas ="TD-Ubah2"><?php echo $Sellcount; ?></td>
<td class ="TD-Ubah2" nowrap><?php echo $row_rsSell['Nama']; ?></td>
<td class ="TD-Ubah2"><?php echo $row_rsSell['IC'];?></td>
<input type="hidden" id="IC" name="IC" value="<?php echo $row_rsSell['IC'];?>">
<td class ="TD-Ubah2"><input id="notel" name="notel" type="text" value="<?php echo $row_rsSell['NoTel_HF']; ?>"></td>
<td class ="TD-Ubah2">
<select id="Status1" name="Status1" >
<option value="" >SILA PILIH</option>
<option value="A" <?php if($row_rsSell['Status'] == 'A'){ echo "selected"; }?>>PILIHAN 1</option>
<option value="L" <?php if($row_rsSell['Status'] == 'L'){ echo "selected"; }?>>PILIHAN 2</option>
<option value="M" <?php if($row_rsSell['Status'] == 'M'){ echo "selected"; }?>>PILIHAN 3</option>
</select>
</td>
<td class ="TD-Ubah2">
<select id="uia" name="uia" >
<option value="" >SILA PILIH</option>
<option value="P" <?php if($row_rsSell['uia'] == 'P'){ echo "selected"; }?>>PILIHAN 1</option>
<option value="K" <?php if($row_rsSell['uia'] == 'K'){ echo "selected"; }?>>PILIHAN 2</option>
<option value="H" <?php if($row_rsSell['uia'] == 'H'){ echo "selected"; }?>>PILIHAN 3</option>
</select><br>
</td>
</tr>
<?php } while ($row_rsSell = mysql_fetch_assoc($rsSell));?>
</tbody>
i just amend my code..and still the other rows not run that java script..