0

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

在我尝试禁用表单中 5 个选择菜单中的 4 个之前，此方法效果很好。我正在尝试使用带有 ID 等级的选择值来禁用或启用 ID 为 position_reason、exposure_reason、patient_reason、device_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 的末尾，则该函数将在表单的第二页上工作，但在其他页面上不起作用。

我已经意识到我需要做的是以某种方式获取$iinto的值var i并且我已经使用过var i = <? echo $i; ?>;，但它不存储$i. 我什至试过把：

echo '<script>';
echo '<i = '.$i.';'; ?>
echo '</script>';

在用于创建表的 while 循环中，用于$i++;创建$i唯一 ID 的表，但在 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的使用方式。

如果选择菜单的值为 1 ，我只是在寻找一种方法来阻止用户从 、 或选择菜单中选择任何positioning内容。exposurepatientequipmentgrade

4

1 回答 1

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);
});
于 2013-08-27T05:19:37.603 回答