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? :)

what do you mean by the two checkboxes cannot be selected at the same time? — Kawinesh S K
– Kawinesh S K, Commented Dec 7, 2013 at 9:16
The alert() method displays an alert dialog with the optional specified content and an OK button. I didn't find any callback method. developer.mozilla.org/en-US/docs/Web/API/Window.alert — Krish R
– Krish R, Commented Dec 7, 2013 at 9:19
Also post more of your HTML, particularly the containing form, but more if it's relevant. — Jackson Ray Hamilton
– Jackson Ray Hamilton, Commented Dec 7, 2013 at 9:19
"I do not like radio buttons" - that is plain silly. you want radio button functionality, use radio buttons — mplungjan
– mplungjan, Commented Dec 7, 2013 at 9:30

animuson · Accepted Answer · 2014-01-27 01:38:53Z

6

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

edited Jan 27, 2014 at 1:38

animuson♦

54.9k28 gold badges142 silver badges150 bronze badges

answered Dec 7, 2013 at 9:40

mplungjan

180k29 gold badges183 silver badges246 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Malasorte Over a year ago

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...

Kawinesh S K · Accepted Answer · 2013-12-07 09:57:04Z

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

edited Dec 7, 2013 at 9:57

answered Dec 7, 2013 at 9:51

Kawinesh S K

3,2301 gold badge19 silver badges30 bronze badges

3 Comments

mplungjan Over a year ago

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 Over a year ago

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

mplungjan Over a year ago

Yes, my mistake. I thought you did :)

Collectives™ on Stack Overflow

If checkbox selected make input required

2 Answers 2

1 Comment

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related