多模态表单Radio Button选中状态异常问题求助

问题根源 #

你遇到的问题核心在于所有模态框内的单选按钮和对应标签的id属性完全重复。比如每个模态框里都有id="fkj"、id="disc-3"这类重复的id值。虽然你已经保证了单选按钮组的name属性唯一，但HTML规范要求id必须是全局唯一的——浏览器无法区分多个相同id的元素，点击后面模态框的标签时，只会匹配到页面中第一个带有该id的单选按钮（也就是第一个模态框里的），这就导致了选中状态串位、当前模态框无高亮的问题。

修复步骤 #

给每个模态框内的所有带id的元素添加唯一标识，直接复用post.id即可确保全局唯一性：

修改后的代码示例 #

<!-- Modal report posting -->
<div class="modal" id="{{post.id}}-1" tabindex="-1" role="dialog" aria-labelledby="validate-modal-label" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">

    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLongTitle-{{post.id}}">Report</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
        </button>

      </div>
      {{post.id}}
      <div class="modal-body">
        <form action="" class="report_job_form" method="post" novalidate>
          <input type="hidden" name="crf-protect" id="crf-protect-{{post.id}}" value="{{csrf_token()}}">
          <div class="report-element">
            <div class="report-category hoverable">
              <p>
                <label for="fkj-{{post.id}}">
                    <input type="radio" id="fkj-{{post.id}}" name="report{{post.Position}}_value" value="Fake Job">
                    <span>Fake Job</span>
                </label>
              </p>
            </div>
            <div class="report-category hoverable">
              <p>
                <label for="disc-3-{{post.id}}">
                    <input type="radio" id="disc-3-{{post.id}}" name="report{{post.Position}}_value" value="Discrimination">
                    <span>Discrimination</span>
                </label>
              </p>
            </div>
            <div class="report-category hoverable">
              <p>
                <label for="advert-{{post.id}}">
                    <input type="radio" id="advert-{{post.id}}" name="report{{post.Position}}_value" value="Advertisement">
                    <span>Advertisement</span>
                </label>
              </p>

            </div>

            <div class="report-category hoverable">
              <p>
                <label for="other-2-{{post.id}}">
                    <input type="radio" id="other-2-{{post.id}}" name="report{{post.Position}}_value" value="Other">
                    <span>Other</span>
                </label>
              </p>

            </div>
          </div>
          <div class="input-field col s12">
            <textarea id="textarea7-{{post.id}}" class="materialize-textarea" data-length="120" name="details"></textarea>
            <label for="textarea2-{{post.id}}">More Details</label>
          </div>
          <input type="hidden" name="user-ident" id="user-ident-{{post.id}}" value="{{current_user.id}}" readonly>
          <input type="hidden" name="post-ident" id="post-ident-{{post.id}}" value="{{post.id}}" readonly>
          <input class="btn report-submit" type="submit">
        </form>
      </div>
    </div>
  </div>
</div>

关键修改点 #

• 所有id属性都追加了{{post.id}}，比如fkj改为fkj-{{post.id}}，对应的label的for属性同步更新
• 模态框标题、CSRF隐藏域、文本框及对应标签的id也做了同样处理，彻底避免全局id重复

额外提醒 #

从materialize-textarea类能看出你在用Materialize框架，模态框打开后可以触发一次组件初始化（比如M.updateTextFields()），避免动态生成的表单元素出现样式或交互异常。

内容的提问来源于stack exchange，提问作者Rugile Venskute