Checkbox not working on modal.

Topic: Checkbox not working on modal.

Adnan Jamil free asked 4 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>

Add comment

Magdalena Dembna staff answered 4 years ago

1 0 Best answer

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

<pre class="prettyprint"><code> <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>
</code></pre>

<p>Are you getting any errors in the console? Kind regards, Magdalena</p>

Please insert min. 20 characters.

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

Add comment

Adnan Jamil free answered 4 years ago

0 0 Best answer

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!

Add comment

Write

Create snippet

FREE CONSULTATION

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

Status

Resolved

Specification of the issue

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

Adnan Jamil

15Support score
1Questions 1Answers 1Snippets