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>

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-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-body class="mx-3 grey-text">
          label="Your email"
        <mdb-input label="Your password" icon="lock" type="password" />

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

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.


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



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