我有一个页面，它使用 JQuery 滑块使用 while 循环多次显示相同的表单。 为了让每个表单独立验证，我为其 ID 分配了一个变量$i，然后在表单末尾将 1 添加到 $i 中，准备用作下一个表单的 ID。
这很有效，直到我尝试禁用表单中 5 个选择菜单中的 4 个。 我正在尝试使用具有 ID 等级的选择值来禁用或启用 ID 为 positioning_reason、exposure_reason、patient_reason equipment_reason 的选择。
为了在其他页面上实现这一点，我使用了：
<script type="text/javascript">
$(document).ready(function() {
$('#positioning_reason').attr('disabled','disabled').css('color','#F0F0F0');
$('#exposure_reason').attr('disabled','disabled').css('color','#F0F0F0');
$('#patient_reason').attr('disabled','disabled').css('color','#F0F0F0');
$('#equipment_reason').attr('disabled','disabled').css('color','#F0F0F0');
$('.reason').css('color','#F0F0F0');
$('#grade').change(function () {
var selected = $(this).find(':selected').val();
if(selected == 1) {
$('#positioning_reason').attr('disabled','disabled').css('color','#F0F0F0');
$('#exposure_reason').attr('disabled','disabled').css('color','#F0F0F0');
$('#patient_reason').attr('disabled','disabled').css('color','#F0F0F0');
$('#equipment_reason').attr('disabled','disabled').css('color','#F0F0F0');
$('.reason').css('color','#F0F0F0');
} else {
$('#positioning_reason').attr('disabled',false).css('color','#000');
$('#exposure_reason').attr('disabled',false).css('color','#000');
$('#patient_reason').attr('disabled',false).css('color','#000');
$('#equipment_reason').attr('disabled',false).css('color','#000');
$('.reason').css('color','#000');
}
});
});
</script>
但是，在此页面上，除了第一种形式外，它根本不起作用。
如果我向上述函数添加var i = 2;并将<? echo $i; ?>添加到表单和上述函数中所有相关 ID 的末尾，则该函数将在表单的第二页上工作，但在其他页面上不起作用。
我已经意识到我需要做的是以某种方式将$i的值带入var i并且我已经使用了var i = <? echo $i; ?>;但它不存储$i的值。 我什至尝试过推杆：
echo '<script>';
echo '<i = '.$i.';'; ?>
echo '</script>';
唯一 ID 创建$i的$i++;正下方创建表的 while 循环中，但在 JavaScript 函数中使用时没有新值。
表单的精简版本
$i = 1;
while($row = $result->fetch_assoc()) {
<form name="audit_form<? echo $i; ?>" id="audit_form<? echo $i; ?>" method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>" onsubmit="return saveScrollPositions(this);">
<input type="hidden" name="form" value="<? echo $i; ?>">
<table id="audit_table<? echo $i; ?>">
<? $form = $_POST['form']; ?>
<tr>
<td><? echo $i.' of '.$num_images; ?></td>
<td><input type="submit" name="image_delete" value="" onClick="return delete_confirm()" /></td>
<td>
<img id="image<? echo $i; ?>" src="<? echo $row['imageLocation']; ?>"</td>
</tr>
<tr>
<td>1. Select a Grade</td>
</tr>
<tr>
<td colspan="2">
<select name="grade" id="grade" >
<option value="1"
<? if(($form == $i)&&($_POST['grade']=='1')){
echo 'selected';
}else if($row['imageGrade']=='1'){
echo 'selected';}
?>>1 - Perfect</option>
<option value="2"
<? if(($form == $i)&&($_POST['grade']=='2')){
echo 'selected';
}else if($row['imageGrade']=='2'){
echo 'selected';}
?>>2 - Diagnostic</option>
<option value="3"
<? if(($form == $i)&&($_POST['grade']=='3')){
echo 'selected';
}else if($row['imageGrade']=='3'){
echo 'selected';}
?>>3 - Unusable</option>
</select>
</td>
</tr>
<tr>
<td>2. Reasons if not Grade 1</td>
</tr>
<tr>
<td colspan="2"><b>If Positioning</b>
</td>
</tr>
<tr>
<td colspan="2">
<select name="positioning_reason" id="positioning_reason">
<option value="">Please Select</option>
<?
$sql_positioning = "SELECT * FROM gradeReason WHERE reason_userID = $user_id AND category = 'positioning' AND current = 1";
$result2 = mysqli_query($mysqli,$sql_positioning) or die(mysqli_error($mysqli));
while($row_positioning = mysqli_fetch_array($result2)){?>
<option value="<? echo $row_positioning['reason_name']; ?>"
<? if(($form == $i)&&($_POST['positioning_reason']==$row_positioning['reason_name'])){
echo 'selected';
}else if($row['positioning_reasonID']==$row_positioning['reason_name']){
echo 'selected';}
echo'>'.ucfirst(preg_replace_callback("/[a-zA-Z]+/",'ucfirst_some',$row_positioning['reason_name'])); ?></option>
<?
}
?>
</select>
</td>
</tr>
<tr>
<td colspan="2"><b>If Exposure</b></td>
</tr>
<tr>
<td colspan="2" class="reason">
//second select menu here
</td>
</tr>
<tr>
<td colspan="2"><b>If Patient</b></td>
</tr>
<tr>
<td colspan="2" class="reason">
//third select menu here
</td>
</tr>
<tr>
<td colspan="2"><b>If Equipment</b></td>
</tr>
<tr>
<td colspan="2" class="reason">
//fourth select menu
</td>
</tr>
<tr>
<td>
<input type="submit" id="audit_submit" name="audit_submit" class="audit_submit audit_submit_btn" onClick="return validateForm(this.form)" value="" /></td>
</tr>
</table>
</form>
<?
$i++;
}
?>
请注意，我对表单或表格没有任何问题，如果缺少元素，那是因为我没有发布整个表单，因为它很大。 我已经发布了削减版本，以便您可以看到如何使用变量$i。
我只是在寻找一种方法来阻止用户从positioning、exposure、patient或equipment选择菜单中选择任何内容，如果grade选择菜单的值为 1。
你需要修复的第一件事是输入中的 id 属性，请记住，在 HTML 页面中不能有多个具有相同 id 的元素，现在你只是将$i附加到表单和表格中。
由于我看到您想对所有选择执行相同的操作，因此我建议您完全删除 id，并将一个公共类设置为 all，即 reason_select .
因此，您的<select>标签如下所示：
<select name="positioning_reason" class="reason_select">
然后jQuery代码变得简单得多
UPADTE 如果要对页面加载执行检查，可以执行以下操作：
$(document).ready(function() {
function disableSelects(){
//Find the parent table
var $parentTable = $(this).closest('table');
//Get the selected value
var selected = $(this).find(':selected').val();
if(selected == "1") {
//Find selects inside parent table and disable them
$parentTable.find('.reason_select, .reason').css('color','#F0F0F0');
$parentTable.find('.reason_select').prop('disabled',true);
}else{
//Find selects inside parent table and remove disabled state
$parentTable.find('.reason_select, .reason').css('color','#000');
$parentTable.find('.reason_select').prop('disabled',false);
}
}
//Check on page load and after change on the inputs
$('select[name="grade"]').each(disableSelects).change(disableSelects);
});