选中该字段的复选框时，设置“需要属性” - Set Attr Required when a checkbox for that field is checked

我有一些循环行，每行都有一个复选框。在每一行中都有一个下拉列表，我希望在选中该行中的复选框时将其设置为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>

我想你没有忘记标签：<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>';

然后我在提交部分注意到：

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

这是一个

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");
    }
});