Issues with unchecking modal icheck box when closing in Bootstrap JavaScript

Here is the HTML code that I am working with:

<div class="modal inmodal" id="handleUserModal" tabindex="-1" role="dialog"  aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content animated fadeIn">
            <form class="form">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                    <h4 class="modal-title">Add user</h4>
                </div>
                <div class="modal-body">
                    <div class="form-group row profile_field">
                        <label class="col-lg-3 col-form-label">First Name</label>
                        <div class="col-lg-9">
                            <input id="firstname" name="firstname" type="text" placeholder="First Name" class="form-control">
                        </div>
                    </div>
                    <div class="form-group row reset_password_field mb-0 mt-4">
                        <div class="col-lg-offset-2 col-lg-10">
                            <div class="i-checks reset_password_check" id="password_check">
                                <label> <input id="passresetcheck" type="checkbox" /> Reset password </label>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-white" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary" id="saveButton">Save</button>
                </div>
            </form>
        </div>
    </div>
</div>

Now, I have attempted to uncheck the checkbox using the input ID:

Using the input ID:

$('passresetcheck').prop('checked',false)

I also tried the following:

$('passresetcheck').attr('checked',false)

Using the modal ID:

$("#handleUserModal .modal-body").find('input:radio, input:checkbox').prop('checked', false);

Answer №1

After some experimentation, I found that removing the 'checked' class was also necessary for success.

// code snippet to uncheck the input
$('#passresetcheck').prop('checked', false);

// code snippet to remove 'checked' class from elements
$("#password_check div").each(function(index,elem){
  if (elem.classList.contains("checked")) {
    elem.classList.remove("checked");
  }
})  

I noticed changes in the HTML structure when toggling the checkbox:

Before checking:


<div class="form-group row reset_password_field mb-0 mt-4">
    <div class="col-lg-offset-2 col-lg-10">
        <div class="i-checks reset_password_check" id="password_check">
            <label> <input id="passresetcheck" type="checkbox" /> Reset password </label>
        </div>
    </div>
</div>
After checking, the HTML is modified with an additional 'checked' class:


<div class="i-checks reset_password_check" id="password_check">
    <label class=""> 
        <div class="icheckbox_square-green checked" style="position: relative;">
            <input id="passresetcheck" type="checkbox" style="position: absolute; opacity: 0;">
            <ins class="iCheck-helper" style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; background: rgb(255, 255, 255) none repeat scroll 0% 0%; border: 0px none; opacity: 0;"></ins>
        </div>
        Reset password 
    </label>
</div>

Answer №2

Make sure to always double-check whether you have captured the element correctly or not. In your specific scenario, '$('passresetcheck')' is actually undefined.

To properly search by ID using the # symbol, use '$('#passresetcheck')':

const checkbox = $('#passresetcheck')

checkbox.prop('checked', false)

setTimeout(() => checkbox.prop('checked', true), 2000)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="modal inmodal" id="handleUserModal" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content animated fadeIn">
      <form class="form">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
          <h4 class="modal-title">Add user</h4>
        </div>
        <div class="modal-body">
          <div class="form-group row profile_field">
            <label class="col-lg-3 col-form-label">First Name</label>
            <div class="col-lg-9">
              <input id="firstname" name="firstname" type="text" placeholder="First Name" class="form-control">
            </div>
          </div>
          <div class="form-group row reset_password_field mb-0 mt-4">
            <div class="col-lg-offset-2 col-lg-10">
              <div class="i-checks reset_password_check" id="password_check">
                <label> <input id="passresetcheck" type="checkbox" /> Reset password </label>
              </div>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-white" data-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary" id="saveButton">Save</button>
        </div>
      </form>
    </div>
  </div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is it possible in ReactJS to return JSX from a callback function?

After spending some time working with react, I encountered a basic issue that has me stumped. In the Login component, I am submitting a form and if it returns an error, I want to render a snackbar message. handleSubmit = (event) => { event.preven ...

Having trouble integrating an HTML template using JavaScript

I am currently attempting to integrate the HTML code of my website using data-prototype: <div id="accordion" data-prototype=' <div class="card-body"> <textarea id="solution_answers___name___content" name=& ...

What is the reason for the num pad being classified as a character?

Everything is functioning correctly, but when I use the number pad on the right side of my keyboard, it registers as a character and gets deleted. However, the numbers on the left side are accepted without any issue. I want to be able to input numbers usin ...

There appears to be a syntax error in the Values section of the .env file when using nodejs

I have been working on implementing nodemailer for a contact form. After researching several resources, I came across the following code snippet in server.js: // require('dotenv').config(); require('dotenv').config({ path: require(&apos ...

Uncovering the Reasons Behind Multiple Accesses to a ReactJS Page

The code snippet provided shows an issue with accessing the /profile page. Upon accessing the page, there are 6 POST requests sent to the backend. However, after implementing the useEffect hook, while the page is still accessed 6 times, now only 2 POST req ...

Creating seamless transitions between pages using hyperlinks

On the homepage, there are cards that list various policies with a "details" button above them. Clicking on this button should take me to the specific details page for that policy. However, each product can only have one type assigned to it. For instance: ...

Angular 2 with a jssor slider that adjusts seamlessly to different screen

After following the guidance provided in this answer on incorporating jssor into angular2, I have implemented the following JavaScript code snippet in a file and referenced it in angular-cli.json. jssor_1_slider_init = function() { var jssor_1_op ...

hyperlinked text that automatically updates with the current date (using metarefresh)

I want to insert a date variable into a URL based on the current date. Specifically, I am looking to create a link from SharePoint that directs a user to the relevant files in a shared drive. My initial idea is to use an HTML page with a meta refresh that ...

The .removeAttr('checked') method fails to function as expected

I am currently using CodeIgniter. Check out this example of my code. Please fill the textbox and check the checkbox next to it, then click on the "add" link. You will notice that it does not work as expected..removeAttr('checked') newDiv.find(&a ...

Guide for executing Gulp tasks in a sequence one by one

Here is an example snippet: gulp.task "coffee", -> gulp.src("src/server/**/*.coffee") .pipe(coffee {bare: true}).on("error",gutil.log) .pipe(gulp.dest "bin") gulp.task "clean",-> gulp.src("bin", {read:false}) .pipe c ...

Using Selenium in Java to interact with popup elements

Attempting to retrieve and interact with pop-up/alert elements using selenium in Java has been a bit challenging for me. Below is the code snippet I have been working on: import org.openqa.selenium.By; import org.openqa.selenium.JavascriptExecutor; import ...

Personalized labels for your JQuery Mobile sliders

Struggling to make this work correctly, I aim to introduce tick marks and custom labels into jQuery Mobile's slider widget. My goal is to add tick markers at 0, 25, 50, 75, and 100 with a unique string above each tick. Additionally, I want these label ...

Assign value to twig variable using JavaScript in Symfony version 3.4

Hello everyone, I am currently working on a form that is functioning well. However, I am facing an issue with setting the localization of a place manually using latitude and longitude values. To address this, I decided to create a map with a draggable mark ...

Is there a way to create a Captcha image from text using JavaScript in an HTML document?

As I work on creating a registration web page, ensuring security is key. That's why I'm looking for a way to generate captcha images for added protection. Any suggestions on how I can transform text into captcha images? ...

Looking for a discreet JavaScript-based text editor with advanced features?

Our CMS has been using the now-unsupported RichTextBox control for a while, and we want to find a lighter-weight alternative with better cross-browser support. Initially, we were considering different ASP.NET components, but I am starting to think that an ...

What is the best method to assign jQuery to individual Bootstrap Modals within Thymeleaf?

I am facing the following situation, <script> $(document).ready(function (){ $("#inputText").hide(); $("#checkboxId").click(function (){ $("#div1").toggle("slow" ...

Add an asterisk before each line of comment when working in a TypeScript file using the VS Code IDE

Within my VS Code workspace, I am using the Typescript language and would like to format my comments across multiple lines with a specific style (look out for the star character) /** *@desc any text * any text */ However, when I attempt to write a comm ...

eliminating items from an array nested inside another array

****************UPDATED********************************************************* I am stuck trying to manipulate an array within another array and remove elements based on conditions. The main goal is to make changes without altering the original array of ...

What is the best way to achieve line breaks in text that auto-wraps in JavaScript/PHP?

My resizable div contains text/sentences. As I adjust the size of the div, the text wraps itself to perfectly fit within the available space in the container div. Now, I am faced with the task of converting this dynamic text into an image using php and th ...

navigation panel including menu items and company logo positioned to the left side

My webpage contains the following code: <nav class="navbar" style="background-color: #264653; position:absolute; top:0px; left:50%; transform:translateX(-50%); width:100%; "> <div class="container-fluid"> < ...