我正在寻找一些建议,只需将一些输入设置为"必需"如果他们所处的div不被隐藏。
这是我用来显示隐藏div的javascript:
function ShowHide(){
if(document.getElementById('addressY').checked){
document.getElementById("addressT").style.display = "block";
} else {
document.getElementById("addressT").style.display = "none";
}
}
隐藏的DIV输入形式的一个例子:
<label class="col-md-4 control-label" for="radios"><b>Did you find an address where the company accepts payments?</b></label>
<div class="col-md-4">
<div class="radio"><label for="radios-1"><input id="addressY" name="spelling" onchange="ShowHide()" required="" type="radio" value="yes" /> Yes </label></div>
<div class="radio"><input id="addressN" name="spelling" onchange="ShowHide()" required="" type="radio" value="no" /> No</div>
</div>
</div>
<div id="addressT" style="display: none;">
<div class="form-group"><b><label class="col-md-4 control-label" for="Full Address">Please fill in the full address that you found.</label> </b>
<div class="col-md-4"><label for="radios-0">Make Check Payable To (Optional): <input class="form-control input-md" id="address1" name="address1" placeholder="" style="width: 100%;" type="text" /></label>
</div>
您可以在行动here中看到完整表单的示例。
如果你能想出更好的方法,我很乐意听到这个。我是javascript和jquery的相对初学者。
答案 0 :(得分:1)
如果您隐藏元素并禁用单选按钮,那么您的问题就解决了 所以,
function ShowHide(){
if(document.getElementById('addressY').checked){
document.getElementById("addressT").style.display = "block";
for (var i=0, iLen=radios.length; i<iLen; i++) {
radios[i].disabled = false;
}
} else {
document.getElementById("addressT").style.display = "none";
var radios = document.querySelectorAll("[name='addresstype']")
for (var i=0, iLen=radios.length; i<iLen; i++) {
radios[i].disabled = true;
}
}
}
答案 1 :(得分:0)
尝试这样的事情:
function ShowHide(){
if(document.getElementById('addressY').checked){
document.getElementById("addressT").style.display = "block";
document.getElementById("divWithRadioButtons").innerHTML = "Write your html code for those radio buttons and make them required"
} else {
document.getElementById("addressT").style.display = "none";
document.getElementById("divWithRadioButtons").innerhtml="";
}
}