javascript - 选中该字段的复选框时设置 Attr Required

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