Validate Select dropdown if checkbox is clicked

Question

Hi All, I am facing this problem of validating drop downs in a lists. There is a list of checkboxes and corresponding select boxes, if a particular checkbox within an <li> is checked, then the corresponding select box should have a value selected, else throw and error. Please help....

The html code is as follow...

<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" />

Thanks....

Answer 1

One option is to use JavaScript. Place on onclick event handler in the checkbox tags. When the checkbox is changed, the onclick event will be fired. From there you can do what you need to do to validate the drop down lists. Also, it will make it easier if you give your form elements IDs. Here is an example. The syntax may be off a little.

<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

This if the code which i have tried out.. i was successful in validating for checkbox, but if this checkbox is selected, the user has to select a dropdown corresponding to this.. i am attaching the code below...

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