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

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();
    .....
}

注意：此代码仅适用于“现代”浏览器，因为有一些功能和属性，例如：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");
    }
});