只有当他们的div不被隐藏时才需要文本输入?

时间:2016-06-11 21:16:00

标签: javascript jquery html forms validation

我正在寻找一些建议,只需将一些输入设置为"必需"如果他们所处的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;">&nbsp;
<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的相对初学者。

2 个答案:

答案 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="";
}
}