Question

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

这很有效，直到我尝试禁用表单中5个选择菜单中的4个。我正在尝试使用ID等级的select值来禁用或启用具有locate_reason，exposure_reason，patient_reason，equipment_reason ID的选项。

要在我使用的其他页面上实现此目的：

<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; ?>;但它没有存储{{1}的值}}。我甚至尝试过：

$i

在while循环中，用于在echo '<script>'; echo '<i = '.$i.';'; ?> echo '</script>';下创建表，用于为唯一ID创建$i++;但在使用时没有新值JavaScript函数。

表格的缩减版

$i

请注意我对表格或表格没有任何问题，如果缺少元素，那是因为我没有发布整个表格，因为它很大。我发布了缩减版本，以便您可以看到变量$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选择菜单中选择任何内容{1}}选择菜单的值为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);
});

在页面上禁用具有动态ID的多个表单的选择选项

1 个答案: