Topic: Checkbox not working on modal.

Adnan Jamil free asked 3 years ago


Expected behavior Checkbox should check/uncheck when clicked. Actual behavior Checkbox state does not update. This is only happening on modals. Normal pages are working fine. Resources (screenshots, code snippets etc.) This is the code that I'm using:

<div class="custom-control custom-checkbox">
    <input type="checkbox" class="custom-control-input" id="defaultUnchecked" checked>
    <label class="custom-control-label" for="defaultUnchecked">Default unchecked</label>
</div>

Magdalena Dembna staff answered 3 years ago


I have tried this code and it seems to be working fine, so I cannot reproduce your issue:

 <mdb-btn rounded color="default" @click.native="login = true"
      >launch login modal <mdb-icon icon="eye" class="ml-1"
    /></mdb-btn>
    <mdb-modal :show="login" @close="login = false">
      <mdb-modal-header class="text-center">
        <mdb-modal-title tag="h4" bold class="w-100">Sign in</mdb-modal-title>
      </mdb-modal-header>
      <mdb-modal-body class="mx-3 grey-text">
        <mdb-input
          label="Your email"
          icon="envelope"
          type="email"
          class="mb-5"
        />
        <mdb-input label="Your password" icon="lock" type="password" />

        <div class="custom-control custom-checkbox">
          <input
            type="checkbox"
            class="custom-control-input"
            id="defaultUnchecked"
            checked
          />
          <label class="custom-control-label" for="defaultUnchecked"
            >Default unchecked</label
          >
        </div>
      </mdb-modal-body>
      <mdb-modal-footer center>
        <mdb-btn @click.native="login = false">Login</mdb-btn>
      </mdb-modal-footer>
    </mdb-modal>

Are you getting any errors in the console? Kind regards, Magdalena


Adnan Jamil free answered 3 years ago


Thank you so much for your answer, it helped me figure it out! It was more of a z-index issue. When I called the modal from my parent component instead of the child, it worked. Kind of strange why it didn't work before but all seems well now. Thanks again!



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue

  • User: Free
  • Premium support: No
  • Technology: MDB Vue
  • MDB Version: 6.2.0
  • Device: Desktop
  • Browser: All
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: No