If checkbox selected make input required

问题:

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

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

回答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