javascript - 仅当未隐藏其 div 时才需要文本输入？

Question

我正在寻找一些建议，如果它们所在的 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 的初学者。

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