My checkbox is not checked when pop up modal opens. I am using bootstrap modal and jquery. Initially I want to check the checkbox on first open later it need to checked/unchecked based on its value exist in database. I have used this

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

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

my modal code

<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>

when i open the modal it is still unchecked . Initially I want check the checkbox. later i will check the database value to determine whether to check or uncheck checkbox

CodePudding user response：

Use .prop( "checked", true ); for checkboxes. 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>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

if $('#edit-address').attr('checked', true) and $('#edit-address').prop('checked', true) doesn't work, try these:

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

or

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

or trigger a click based on checked or not:

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