If checkbox selected make input required

Question

As part of a web form, I have two checkboxes (both with the name "my_checkbox") and two input filelds (one with the name "input1" and the other named "input2").

<input type="checkbox" name="my_checkbox" value="some text" onclick="a function;    checkBoxValidate(0);">

<input type="checkbox" name="my_checkbox" value="some diffrent text" onclick="a diffrent function; checkBoxValidate(1);">

<input id="input1" name="input1"  />

<input id="input2" name="input2"  />

If user selects the first checkbox, input1 must not be empty. If user selects the second checkbox, input2 must not be empty. The two checkboxes must have the same name. Function checkBoxValidate assures the two checkboxes cannot be selected at the same time (I don't like radio buttons).

My javascript:

}else if (!document.myform.my_checkbox[0].checked && myform.input1.value == ''){ 
alert ('Please enter some text!',function(){$(myform.input1).focus();}); 
return false;

}else if (!document.myform.my_checkbox[1].checked && myform.input2.value == ''){ 
alert ('Please enter some text!',function(){$(myform.input2).focus();}); 
return false;

Of course, nothing works! Please help? :)

Solution 1

Seeing you might want to take this simple, I write it simple and use plain JS since you did not tag the question with jQuery.

Live Demo

window.onload=function() {
  var form1=document.getElementById("form1"); // assuming <form id="form1"
  form1.onsubmit=function() {
    if (this.my_checkbox[0].checked && this.input1.value=="") {
      alert("Please enter something in input 1");
      this.input1.focus();
      return false;
    }
    if (this.my_checkbox[1].checked && this.input2.value=="") {
      alert("Please enter something in input 2");
      this.input2.focus();
      return false;
    }
    return true; // allow submission
  }
  // if the checkboxes had different IDs this could have been one function
  form1.my_checkbox[0].onclick=function() {
    this.form.my_checkbox[1].checked=!this.checked;
  }
  form1.my_checkbox[1].onclick=function() {
    this.form.my_checkbox[0].checked=!this.checked;
  }
}

Solution 2

HMTL

<input type="text" id="textbox"/><br/>
<input type="checkbox" id="checkbox1" value="CB1"/><br/>
<input type="text" id="textbox1"/><br/>
<input type="checkbox" id="checkbox12"/>

JavaScript

$('#checkbox1').on('click',function(){
   var checked=$(this).is(':checked');
    if(checked==true)
    {   
        $('#textbox1').attr('disabled',true);
        $('#checkbox12').attr('checked', false);
        $('#textbox').attr('disabled',false);
        var text=$('#textbox').val();
        checktext(text)
    }
  });

$('#checkbox12').on('click',function(){
   var checked=$(this).is(':checked');
    if(checked==true)
    {   
        $('#textbox').attr('disabled',true);
        $('#checkbox1').attr('checked', false);
        $('#textbox1').attr('disabled',false);
        var text=$('#textbox1').val();
        checktext(text)
    }
  });

function checktext(text){
    alert(text);
    if(text=='')
        alert('Enter Text');
}

DEMO

Comments

[Malasorte]

Thank you!!! It worked, after I did some minor changes to adapt to my actual code! And sorry if the question was not well documented...

[mplungjan]

var checked=$('#checkbox1').is(':checked'); ? Why not $(this).is(":checked") - and where is the validation on submit? And use .prop instead of attr. Lastly, the question was not tagges jQuery

[Kawinesh S K]

@mplungjan Thanks for the this in the checkbox and i never disabled the checkbox i disabled the textbox

[mplungjan]

Yes, my mistake. I thought you did :)

[Kawinesh S K]

@mplungjan no problem ;)