使用动态ID的多个表单禁用选择选项

Question

我有一个页面使用JQuery滑块多次使用while循环显示相同的表单。为了让我能够独立验证每个表单，我将一个变量$ i分配给它的ID，然后在表单末尾添加1到$ i以准备用作下一个表单的ID。

这很好，直到我尝试禁用表格中5个选择菜单中的4个。我正在尝试使用具有ID等级的选择的值来禁用或启用ID为position_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>'; 

在用来创建权下被用来创建$i的唯一的ID的$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

Answer 1

第一件事值哟需要解决的问题是输入中的id属性，请记住，在HTML页面中不能有多个具有相同id的元素，现在您只需将$i附加到表格和表格中。

因为我看到你想要对所有选择执行相同的动作，所以我建议你完全删除这个ID并且只需要设置一个通用类，即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); 
});