【问题标题】:Bootstrap validation for dynamically generated checkboxes is not working动态生成的复选框的引导验证不起作用
【发布时间】:2016-03-30 05:30:44
【问题描述】:

以下代码动态创建复选框:

<div class="user-all-services-info">
  <div class="row">
    <div class="col-md-6">
      <div class="form-group">
        <label class="control-label">Select Services</label>
        <br>
        <c:if test="${!empty srvcLst}">
          <c:forEach items="${srvcLst}" var="srvc">
            <c:set var="id" scope="page" value="0"></c:set>
            <c:choose>
              <c:when test="${!empty smLst}">
                <c:forEach items="${smLst}" var="smLst">
                  <c:if test="${srvc.ssmsId == smLst[0]}">
                    <c:set var="id" value="1"></c:set>
                  </c:if>
                </c:forEach>
                <c:choose>
                  <c:when test="${id eq 1}">
                    <div class="checkbox">
                      <label><input
                               type="checkbox"
                                 name="srvcId"
                                   value="${srvc.ssmsId}">
                        &nbsp;${srvc.srvcNm}
                      </label>
                    </div>
                  </c:when>
                </c:choose>
              </c:when>
            </c:choose>
          </c:forEach>
        </c:if>
      </div>
    </div>
  </div>
</div>

我编写了下面的Bootstrap 代码来验证至少一个动态生成的复选框已被选中(请注意,此代码仅适用于第一个复选框;它不适用于其他复选框)。

srvcId: {                                                       
    validators: {                                                       
        notEmpty: {
            message: 'Please select at least 1 service.'
        }
    }                                       
}

【问题讨论】:

    标签: twitter-bootstrap checkbox jstl bootstrapvalidator


    【解决方案1】:

    您需要的是跟随更改以验证具有相同名称的复选框

    <label><input type="checkbox" name="srvcId[]" value="${srvc.ssmsId}">&nbsp;${srvc.srvcNm}</label>
    

    JS

    'srvcId[]': {                                                       
        validators: {                                                       
            notEmpty: {
                message: 'Please select at least 1 service.'
            }
        }                                       
    }
    

    这里是an example,用于验证同名复选框。

    【讨论】:

      猜你喜欢
      • 2020-09-07
      • 1970-01-01
      • 2014-08-14
      • 1970-01-01
      • 2014-03-20
      • 1970-01-01
      • 1970-01-01
      • 2015-05-27
      • 2011-06-29
      相关资源
      最近更新 更多