模态打开jQuery时标记复选框

Question

当弹出模式打开时，我的复选框未选中。 我正在使用引导模式和 jquery。 最初我想在第一次打开时选中复选框，稍后它需要根据数据库中存在的值选中/取消选中。 我用过这个

  $('#edit-address').attr('checked', true)
                            

  <input class="check-address-checkbox"  id="edit-address" type="checkbox" value="1" />

我的模态代码

<div
  id="bs-modal-edit-field-address"
  class="modal fade in"
  data-fieldid="1932"
  data-fieldname="field x"
  aria-hidden="false"
  style="display: block"
>
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <!-- Modal Header -->
      <div class="modal-header text-center">
        <button type="button" class="close" data-dismiss="modal">×</button>
        <h3
          class="semibold modal-title text-primary"
          style="text-transform: capitalize"
        >
          Add/Edit 'Address' Field
        </h3>
      </div>
      <!-- End Modal Header -->

      <div class="modal-body pb0">
        <div class="form-group formtemplate mb0">
          <div class="row">
            <div class="col-lg-12">
              <div
                class="panel form-horizontal form-bordered form-canvas"
                name="form-profile"
              >
                <div class="panel-body pt0 pb0">
                  <div class="form-group no-border">
                    <div class="row">
                      <div class="col-sm-6">
                        <label
                          for="edit-address-label"
                          class="control-label mb5"
                          >Question (Name):</label
                        >
                        <input
                          id="edit-address-label"
                          type="text"
                          class="form-control fieldNames"
                          data-option="label"
                          placeholder="The question and name for this field.."
                        />
                      </div>
                      <div class="col-sm-6 mt20 pt10">
                        <div class="checkbox custom-checkbox">
                          <input
                            id="edit-address"
                            type="checkbox"
                            data-option="required"
                            value="1"
                          />
                          <label for="edit-address">Mark this</label>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- /.modal-content -->
      </div>
      <!-- /.modal-dialog -->
    </div>
  </div>
</div>

当我打开模态框时，它仍然处于未选中状态。 最初我想选中复选框。稍后我将检查数据库值以确定是否选中或取消选中复选框

Answer 1

将.prop( "checked", true ); 用于复选框。 https://learn.jquery.com/using-jquery-core/faq/how-do-i-check-uncheck-a-checkbox-input-or-radio-button/

$('#btn-on').on('click', function(){
    $('#edit-address').prop('checked', true);
});

$('#btn-off').on('click', function(){
    $('#edit-address').prop('checked', false);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>



<input class="check-address-checkbox" id="edit-address" type="checkbox" value="1" />
 
 <br/>
 <br/>
 
<button id="btn-on">On button</button>
<br/>
 <br/>
 

<button id="btn-off">Off button</button>

Answer 2

如果 $('#edit-address').attr('checked', true) 或 $('#edit-address').prop('checked', true) 不起作用，请尝试以下方法：

$('#edit-address').attr('checked', 'checked');

或

 $('#edit-address').prop('checked', 'checked');

或者根据是否勾选触发点击：

if(!$('#edit-address:checked').val()){$('#edit-address').click(); }