如何在隐藏控件时禁用单选按钮中的必填字段？

How can I disable the show/hide button content when it's disabled? Because even if it is hidden, it is required to fill those fields.

如何在禁用时禁用显示/隐藏按钮内容？因为即使它被隐藏，也需要填充这些字段。

Here is My code:

这是我的代码：

<script type="text/javascript">
    function ShowHideDiv() {
        var chkYes = document.getElementById("chkYes");
        var dvPassport = document.getElementById("dvPassport");
        dvPassport.style.display = chkYes.checked ? "block" : "none";
    }
</script>

<span></span>
<label for="chkNo">
    <input type="radio" id="chkNo" name="bill" value="Billable" onclick="ShowHideDiv()" />
   Billable
</label>
<label for="chkYes">
    <input type="radio" id="chkYes" name="bill" value="Non-Billable" onclick="ShowHideDiv()" />
    Non-Billable
</label>
<hr />
<div id="dvPassport" style="display: none">
    Firm Expense Code:
	<select name="FEC" id="txtPassportNumber" > 
  <option selected> 
    --------
  </option> 
  <option> 
    Firm expence-non-billable client Travel 8970100
  </option> 
  <option> 
    Firm expense Travel-Marketing 8970205 Personal Travel
  </option> 
 
 </select>

2 个解决方案

#1

You can add required attribute when it will be shown or when you need to.

您可以在显示所需属性时或在需要时添加所需属性。

document.getElementById("edName").required = true;

So start without required and when person show/hide something add it.

所以在没有要求的情况下开始，当人们显示/隐藏某些内容时添

Answer from this question.

回答这个问题。

How to set HTML5 required attribute in Javascript?

如何在Javascript中设置HTML5必需属性？

Hope this helps.

希望这可以帮助。

#2

You could check the radio buttons display style and if it is none set the required attribute to false else set it to true.

您可以检查单选按钮的显示样式，如果没有设置，则将required属性设置为false，否则将其设置为true。

document.getElementById("edName").style.display === 'none' ? document.getElementById("edName").required = none : document.getElementById("edName").required = true;

update

This should work for all the radio buttons

这适用于所有单选按钮

var radioBtns = document.querySelectorAll('[input type="radio"]');

radioBtns.forEach( function (item){
    item.getElementById("edName").style.display === 'none' ? item.getElementById("edName").required = none : item.getElementById("edName").required = true;
});