Question

我有一些循环行，每行都有一个复选框。每行都有一个下拉列表，我希望在选中行中的复选框时将其设置为required。

MARK       NAME                   QUANTITY         
---------------------------------------------------
 []     inputForName1        Choose => 1,2,3,4,5    
---------------------------------------------------
 []     inputForName2        Choose => 1,2,3,4,5    
---------------------------------------------------
 []     inputForName3        Choose => 1,2,3,4,5    
---------------------------------------------------
 []     inputForName4        Choose => 1,2,3,4,5  
---------------------------------------------------
 []     inputForName5        Choose => 1,2,3,4,5   
---------------------------------------------------
                                   [SUBMIT]

（此处[]是一个复选框，Choose =>是一个下拉选项）

                echo'   <tr>
                        <td><input name="checkbox[]"  type="checkbox"  value="'.$i++.'" /></td>
                        <td><input name="items[]"     type="text"      value="'.$obj->items.'"></td>

                echo'   <td><select name="esquantity[]" required >
                            <option value="" >Choose Quantity</option>';
                              for ($q=1; $q <= $obj->quantity; $q++) {                                
                     echo'  <option value="'.$q.'"> '.$q.' </option>'; }
                     echo'  </select></td>';
                echo'</tr>';                                
                    }
                }
            ?>
            <input type="submit" name="Submit" value="Submit">
                    </form>
                    </table>


        <?php

        if($_SERVER["REQUEST_METHOD"] == "POST") {
            foreach($_POST['checkbox'] as $i) { 

                            $product_name=$_POST['items'][$i];
                            $product_quan=$_POST['esquantity'][$i];


                mysql_query("INSERT INTO estockClaims (items, 
                                                       esquantity)
                                            VALUES    ('$product_name',  
                                                       '$product_quan')");
                }
            }
        ?>

问题是当我只检查两个复选框并提交它们时，它会要求我选择数量列中的所有下拉列表。

Jquery草图

       <script type="text/javascript">
         $(document).ready(function(){
               $('input[type="checkbox"]').on('change', function(e)){
        //          var thisCheckbox = $(this);
                    var thisCheckbox = $('select[name="esquantity"]');
                    var thisRow = thisCheckbox.closest('tr');
                     if($(this.is(':checked')) {

                     }
                        .attr('required'));
                }
            }       
        </script>

Answer 1

我猜你没有忘记标签：<table><form>并关闭输入标签<input ... />

因此，对于您的代码，您可以尝试这个（PHP / HTML部分）：

$i++;
echo'   <tr>
        <td><input name="checkbox['.$i.']"  type="checkbox"  value="'.$i.'"  id="chb'.$i.'" onchange="enableList(this);" /></td>
        <td><input name="items['.$i.']"     type="text"      value="'.$obj->items.'" /></td>';

echo'   <td><select name="esquantity['.$i.']" id="select'.$i.'" disabled onchange="checkSelect(this)">
            <option value="" >Choose Quantity</option>';
              for ($q=1; $q <= $obj->quantity; $q++) {                                
     echo'  <option value="'.$q.'"> '.$q.' </option>'; }
     echo'  </select></td>';
echo'</tr>';

然后我在 SUBMIT 部分注意到了：

if($_SERVER["REQUEST_METHOD"] == "POST") {
  foreach($_POST['checkbox'] as $key => $i) { 
    $product_name=$_POST['items'][$key];
    $product_quan=$_POST['esquantity'][$key];
    //more code
  }
}

和Javascript部分：

function enableList(element) {
    var select = document.getElementById("select"+element.id.substring(element.id.length-1));

    if(element.checked === true){
        select.disabled = false;
        checkSelect(select);
    }else{
        select.disabled = true;
        select.selectedIndex = 0;
    }
}

function checkSelect(element){
    if(!validate_select(element)){
        element.setCustomValidity("Choose an option");
    }else{
        element.setCustomValidity("");
    }
}

function validate_select(select){
    if(select.selectedIndex === 0){
        return false;
    }else{
        return true;
    }
}

已编辑：为了达到新目的（仅在选中至少一项输入时提交）：

将一个类添加到复选框作为标识符：class="chb_group"（因此您不必担心其他复选框）...并且提交按钮的ID可能为：id="btn_submit"默认情况下为disabled

所以你添加：

function enableSubmit(){
    if (document.querySelector('.chb_group:checked')) {
        document.getElementById('btn_submit').disabled = false;
    } else {
        document.getElementById('btn_submit').disabled = true;
    }
}

并将其称为：

function enableList(element) {
    var select = document.getElementById("select"+element.id.substring(element.id.length-1));
    enableSubmit();
    .....
}

注意：此代码仅适用于＆＃34;现代＆＃34;浏览器由于某些功能和属性，例如：setCustomValidity和querySelector

Answer 2

这是一个javascript答案。这是Jquery答案：http://jsfiddle.net/n13wbran/5/

您可以更改我在复选框更改事件中指定的req属性：

$("input[name^='checkbox']").change(function () {
    var id = this.name.substring(8);
    if (this.checked) {
        $("[name='esquantity" + id + "']").attr("req", "true");
    } else {
        $("[name='esquantity" + id + "']").attr("req", "false");
    }
});

然后在Submit点击，点击req == "true"列表并执行以下操作：

$("input[name='Submit']").click(function () {
    var i;
    for(i = 1; i <= parseInt($("[name^='esquantity']").length); i++) {
        if ($("[name='esquantity[" + i + "]']").attr("req") == "true" &&
            $("[name='esquantity[" + i + "]']").val() == "")
            alert("Please select a value for the required lists");
    }
});

选中该字段的复选框时，设置为Attr必需

2 个答案: