我有一个表单，在多个RADIO按钮部分生成以下错误：The label's "for" attribute doesn't match any element "id". This might prevent the browser from correctly auto-filling the form and accessibility tools from working correctly'
我意识到所有的错误信息都与以下格式的无线电按钮相关联。在本例中，输入id ceSiteBanner1和ceSiteBanner0是生成错误的ID，因为这两个ID都不匹配label for='ceSiteBanner'：
但是出于JS的目的，我需要为每个单选按钮/值设置不同的ID，以便根据其他正在填写的表单元素来更改/操作这些字段。在其他输入中，如果用户选择了一个特定的选项，我需要能够自动更改下面的RADIO按钮值，如果两个单选按钮具有相同的ID，我就不能这样做。
我应该如何正确管理这一点？
在此期间，我在YES和NO单选按钮上都有required字段。由于单选按钮只允许选择一个值，那么两个都需要required还是只需要一个？
<div class="form-group col-md-4">
<label for="ceSiteBanner">
<i id="ceAutoRegister_icon" class="iconRequired icon-information-outline"></i> Display Site Banner
<i onclick="displayInfo('ceSiteBanner_Info');" class="iconMore icon-more"></i>
</label>
<div class="form-check form-check-inline">
<label class="form-check-label">
<input class="form-check-input" type="radio" name="ceSiteBanner" id="ceSiteBanner1" value="1" <?=$ceSiteBanner1?> required/>
<span class="radio-icon"></span>
<span class="form-check-description">Yes</span>
</label>
</div>
<div class="form-check form-check-inline">
<label class="form-check-label">
<input class="form-check-input" type="radio" name="ceSiteBanner" id="ceSiteBanner0" value="0" <?=$ceSiteBanner0?> required/>
<span class="radio-icon"></span>
<span class="form-check-description">No</span>
</label>
</div>
</div>
1条答案
按热度按时间cmssoen21#
1.更改标签的for属性以匹配相应单选按钮输入的ID。在这种情况下，标签的for属性应设置为“ceSiteBanner1”或“ceSiteBanner0”，具体取决于单选按钮。例如，“Yes”单选按钮的标签应具有for =“ceSiteBanner1”，“No”单选按钮的标签应具有for =“ceSiteBanner0”。
1.保留单选按钮输入的"id"属性（id ="ceSiteBanner1"和id ="ceSiteBanner0"），因为您需要唯一的ID来区分它们以进行JavaScript操作。
1.由于单选按钮只允许一个选定值，所以您只需要将required属性应用到单选按钮输入中的一个。根据需要标记“是”或“否”单选按钮即可。
包含这些更改的代码