Question

using jquery I want to make a selection from a select box required (ie it can’t be left as the blank default) if a particular checkbox is ticked. My code:

$(document).ready(function(){
  $("#myForm").validate({
    rules: {
      myDropDown: {
        required: {       
          depends: function(element) {
            return $("#myCheckbox:checked")
          }
        }
      }
    }
  })
})

The html:

<input type="checkbox" name="myCheckbox" id="myCheckbox" value="1">
<select name="myDropDown" id="myDropDown">
  <option value="" selected></option>
  <option value="1">Choice 1</option>
  <option value="2">Choice 2</option>
  <option value="3">Choice 3</option>
</select>

Not only is the code not working it’s throwing out the jquery tabs that I have as the next section of javascript.

Any advice appreciated.

Edit: Now that I’ve sorted out all my brackets the behaviour now is that it’s making the select box a required field whether or not the checkbox is checked – ie the depends part is not working. Other javascript on the page is now working ok.

Answer 1

Please try like this

$(document).ready(function(){
  $("#myForm").validate({
    rules: {
       myDropDown:{
          required: function (element) {
             if($("#myCheckbox").is(':checked')){
                 var e = document.getElementById("myDropDown");
                 return e.options[e.selectedIndex].value=="" ;                            
             }
             else
             {
                 return false;
             }  
          }  
       }
    }
  });
});