How to make javascript file work in mvc after page is loaded to disable checkbox (with jquery)?

Question

I'm just started to work on a new project and I'm not very experienced working with javascript and web programming.

On the website is a form with some checkboxes. My job is to write a javascript file with jquery, which should disable some checkboxes if other checkboxes are checked. The ID, name and other information of the checkbox comes live from a database, so there is no variable for the checkbox in the code directly. I use the ID of the checkboxes to check if a checkbox is checked (is this correct?). I think I already have the right code, because it's working on the web console in the browser.

if ($("#id_865_gen").is(":checked")) {
    $("#id_866_gen").prop("disabled", true);
} else {
    $("#id_866_gen").prop("disabled", false);
}

I have an index.html file with all the sources for the javascript file. I made a new js file and added it to the index.html (at the bottom of body tag). I think this is working so far because if I make an alert in the js file, I get an alert before the page is loaded. What else I have to consider while including a js file? Of course, my code has to work live. So if a checkbox is checked, another box should be disabled. If the same box is unchecked the other box should be enabled again. Do I have to put the code in a function and start the function in the HTML file?

I don't know what else is important but the project is mainly built with PHP, jquery, backbone (MVC), template library handlebars, and uses ajax. I have never worked with ajax before, but do I have to include some ajax stuff in the code to make it useable live?

I would be very thankful for suggestions or ideas.

Update:

I found the solution for my problem. I added the onchange attribute to the checkbox. Everytime a checkox gets checked or unchecked my function gets triggered.

Answer 1

There's lots to learn when you're coming to javascript from another language. One of the big adjustments is managing when your code will execute.

Generally speaking, for something like this, you want your code to run:

1. once after the page is ready and
2. every time the inputs change.

Since you're running your code multiple times, putting it in a method makes sense

function updateBoxes() {
    if ($("#id_865_gen").is(":checked")) {
        $("#id_866_gen").prop("disabled", true);
    } else {
        $("#id_866_gen").prop("disabled", false);
    }
}

Just putting this function in a script does not execute the function - you still need to make it execute at the right times. To make it execute after page load can be really different depending on the app. It could be as simple as adding updateBoxes() in a script tag, but usually you would need to wait for some sort of rendering. Without knowing more about your app, the following is a good guess:

$(function() {
    // this code will execute when jquery thinks your DOM is loaded
    updateBoxes(); // do the initial check
    
    $("#id_865_gen").change(updateBoxes); // this will run the check when your input changes value
});

---

Additional Concerns

If this doesn't work, it's likely because the checkboxes are not in the DOM yet when your code runs. They may be added by a framework. If they are added by backbone, you could look around for the backbone render method that adds your html. Then you'd need to execute updateBoxes after the render.

The jquery selectors you are using to find your inputs look like they might change. It may be safer to find your inputs using the name attribute, or possibly a class or some other way. For example:

$("input[name='blahblah']")

would select the input <input type="checkbox" name="blahblah"> without using any id.

Answer 2

You should put your code inside

$( document ).ready(function() {
    // your code
});

Your code will only execute when the page Document Object Model (DOM) is ready

reference: https://learn.jquery.com/using-jquery-core/document-ready/