Conditionally set an attribute of input fields to required if a checkbox is selected using jQuery

I'm using the jquery Tools validator plugin and I have a form with several sections. Each section has a checkbox at the top that I want to be like a main switch for each section - to programatically turn on/off functionality (like validation) for text boxes & email fields in each section.

Basically, I wanted to conditionally set an attribute of 'text' and/or 'email' type input field(s) to "required" if the corresponding group checkbox is selected. Admittedly, I'm not that good with jQuery.

Each form section is similar to below but may have a different number of text and/or email fields:

<input type="checkbox" group-name="mail" name="mail" id="mail_enable"
       checked="<?= (chkConfig("mail_enable", 0) ? "yes" :  "no"); ?>"
       onChange="chkRequired('mail');"   
       title='check this box to send the specified reports to your email.' > 
       <label for="mail_enable">notify me when the batch is complete.</label></div>
  <div class="left"><label for="lblemailid">Email Address: </label></div>
  <div class="right"><input type="email" group-name="mail" name="mailto" 
       id="emailAddress" size="30" maxlength="50" />

I created an attribute called group-name and all of the fields in a section share the same group-name. and with the help of Mr. Frédéric Hamidi (in our discussion below) we have modified my function. here is the latest version:

  function chkRequired(group){ 
    var groupCheckBox = $("#" + group + "_enable");
    var groupSelector = "[group-name='" + groupCheckBox.attr("group-name") + "']";
    var fieldSelector = "input[type=text], input[type=email]";
     if  ( $(groupCheckBox).is(':checked'))  {
        $(groupSelector).add(fieldSelector).attr("required");
       } else { 
        $(groupSelector).add(fieldSelector).removeAttr("required");
     }
   }

I hope this helps anyone else in a similar situation.

I still cant figure out the selector syntax to attach it to the doc.ready() amd .change() globally. but it works if you assign the function to the onChange event for the fields, manually.

Also, if anyone can help me with the syntax for validator.addMethod() so we can just create a custom validation method - that would be appreciated.

Special thanks to Mr. Frédéric Hamidi for helping me work out the logic.

I've created a more detailed tutorial if anyone is interested @ http://www.logicwizards.net/2010/12/07/jquery-tools-custom-validator-mod/

Joe Negron: Logic Wizards ~ NYC

Well, $('#'+groupName).val() returns undefined because your check box matches #mail_enable, not #mail. You don't even need to compute it a second time, since you used it the line before to get at the group name.

Also, val() returns the value of the check box, not its check state. You need the checked attribute (or the :checked selector) for that:

function chkRequired(group)
{
    var groupCheckBox = $("#" + group + "_enable");
    var groupSelector = "[group-name='" + groupCheckBox.attr("group-name") + "']";
    if (groupCheckBox.is(":checked")) {
        $("input:text" + groupSelector).attr("required", "required");
        $("input[type='mail']" + groupSelector).attr("required", "required");
    } else { 
        $("input:text" + groupSelector).removeAttr("required");
        $("input[type='mail']" + groupSelector).removeAttr("required");
    }
}