驗證如果複選框被點擊，選擇下拉菜單

Question

我面臨驗證列表中下拉菜單的問題。有一個複選框和相應的選擇框列表，如果一個<li>中的特定複選框被選中，則相應的選擇框應該有一個選定的值，否則拋出和錯誤。請幫助....

的HTML代碼如下...

<ul> 
<li><input type="checkbox" name="status" /> 
    <select name="select1a"> 
    <option>Value 1</option> 
    <option>Value 2</option> 
    </select> 
    <select name="select1b"> 
    <option>Value 1</option> 
    <option>Value 2</option> 
    </select> 
</li> 
<li><input type="checkbox" name="status" /> 
    <select name="select2a"> 
    <option>Value 1</option> 
    <option>Value 2</option> 
    </select> 
    <select name="select2b"> 
    <option>Value 1</option> 
    <option>Value 2</option> 
    </select> 
</li> 
<li><input type="checkbox" name="status" /> 
    <select name="select3a"> 
    <option>Value 1</option> 
    <option>Value 2</option> 
    </select> 
    <select name="select3b"> 
    <option>Value 1</option> 
    <option>Value 2</option> 
    </select> 
</li> 
</ul> 
<input type="submit" name="Approve" /> 

感謝....

Answer 1

一種選擇是使用JavaScript。在複選框標籤中放置onclick事件處理程序。當複選框被更改時，onclick事件將被觸發。從那裏你可以做你需要做的事情來驗證下拉列表。此外，如果您提供表單元素標識，則會更容易。這是一個例子。語法可能會稍微偏離一點。

<script type="text/javascript"> 
    function validateSelect1Lists(checked) { 
     if(checked && document.getElementById('select1a').selectedIndex > -1) { 
       // Do some validation 
     } 
    } 
</script> 


<li> 
    <input type="checkbox" name="status" id="status" onclick="validateSelect1Lists(this.checked);" /> 
    <select name="select1a" id="select1a"> 
    <option>Value 1</option> 
    <option>Value 2</option> 
    </select> 
    <select name="select1b" id="select1b"> 
    <option>Value 1</option> 
    <option>Value 2</option> 
    </select> 
</li> 

Answer 2

此如果我已經嘗試了..我成功地驗證了複選框，但是，如果選擇了該複選框，則用戶必須選擇與此對應的下拉列表中選擇代碼..我附上代碼以下...

jQuery('#approve').click(function(){ 
    if(status == 1) 
    { 
    if (jQuery('input[type="checkbox"]:checked').size() == 0) 
     { 
     alert('Please choose an option'); 
     return false; 
     } 
     else 
     { 
     return true; 
     }   
    } 
    else if (status == 0) 
    { 
    return true; 
    } 
    });