設置屬性當該字段的複選框被選中時需要

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