I have a website form where I have fields that I want to be required (with JQuery Plugin) only when the check-box is checked.

So far I wrote JavaScript that works if the the check-box is not checked, or checked. But when a user checks the check-box and then unchecks it the code does not work (field is still mandatory when unchecked).

Also one other bug is for some reason this same code only works for updating only one items required boolean. For example if I have the same code but make it so two elements requirements are updated the script does not work at all.

Here is the relevant source code:

<script>
function swap(){
  if(document.getElementById('must').checked){     
    document.getElementById("element1").setAttribute("required", "true");
  }else{      
    document.getElementById("element1").setAttribute("required", "false");
  }
}
</script>


<form>
<input type="checkbox" onclick="swap();" id="must" name="must" value="1" style="width:10;">
<input id="element1" type="text" name="element1" placeholder="Enter Value" >
<input type="submit" id="submit" name="submit" value="Send" >
</form>     

Any assistance would be greatly appreciated.

I have a website form where I have fields that I want to be required (with JQuery Plugin) only when the check-box is checked.

So far I wrote JavaScript that works if the the check-box is not checked, or checked. But when a user checks the check-box and then unchecks it the code does not work (field is still mandatory when unchecked).

Also one other bug is for some reason this same code only works for updating only one items required boolean. For example if I have the same code but make it so two elements requirements are updated the script does not work at all.

Here is the relevant source code:

<script>
function swap(){
  if(document.getElementById('must').checked){     
    document.getElementById("element1").setAttribute("required", "true");
  }else{      
    document.getElementById("element1").setAttribute("required", "false");
  }
}
</script>


<form>
<input type="checkbox" onclick="swap();" id="must" name="must" value="1" style="width:10;">
<input id="element1" type="text" name="element1" placeholder="Enter Value" >
<input type="submit" id="submit" name="submit" value="Send" >
</form>     

Any assistance would be greatly appreciated.

• javascript
• jquery
• forms
• checkbox
• required

3 Answers 3

Best way I know to check if checkbox is checked, it to use jQuery is() method (documentation). It handles x-browser differences for you. Also best way to add attribute to HTML element is to use attr() method.

if($("#must").is(":checked")) {
    $("#element1").attr('required', 'required');
} else {
    $("#element1").removeAttr();
}

You can check in DOM inspector that attribute is added.

Required attribute documentation is here.

Try this, in xhtml we specify required="required" and there no required="false", a better way is to remove attribute required on else

<script type="text/javascript">
   function swap(){
  if(document.getElementById('must').checked){     
    document.getElementById("element1").setAttribute("required", "required");
  }else{      
    document.getElementById("element1").removeAttribute("required");
  }
}
    </script>

The required attribute is a boolean attribute, it presence means that the field is required and its absence means the field isn't required. It has only 3 valid forms 1. required alone by itself 2. required="" equal to an empty string 3. required="required"