加載頁面以禁用復選框（使用 jquery）后，如何使 javascript 文件在 mvc 中工作？

Question

我剛剛開始從事一個新項目，我對 javascript 和 web 編程的工作經驗並不豐富。

網站上有一個帶有一些復選框的表格。 我的工作是使用 jquery 編寫 javascript 文件，如果選中其他復選框，則應該禁用某些復選框。 復選框的 ID、名稱和其他信息來自數據庫，因此代碼中沒有直接用於復選框的變量。 我使用復選框的 ID 來檢查是否選中了復選框（這是正確的嗎？）。 我想我已經有了正確的代碼，因為它正在瀏覽器中的 web 控制台上運行。

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

我有一個 index.html 文件，其中包含 javascript 文件的所有來源。 我創建了一個新的 js 文件並將其添加到 index.html （在 body 標簽的底部）。 我認為到目前為止這是有效的，因為如果我在 js 文件中發出警報，我會在頁面加載之前收到警報。 包含 js 文件時我還需要考慮什么？ 當然，我的代碼必須實時運行。 因此，如果選中了一個復選框，則應禁用另一個框。 如果未選中同一個框，則應再次啟用另一個框。 我是否必須將代碼放入 function 並在 HTML 文件中啟動 function ？

我不知道還有什么重要的，但該項目主要是用 PHP、jquery、主干（MVC）、模板庫把手構建的，並使用 Z2705A83A5A0659CCE34583972637EDA 我以前從未使用過 ajax，但我是否必須在代碼中包含一些 ajax 的東西才能使其可用？

我將非常感謝您的建議或想法。

更新：

我找到了解決我的問題的方法。 我在復選框中添加了 onchange 屬性。 每次檢查或取消檢查時，我的 function 都會被觸發。

Answer 1

當您從另一種語言來到 javascript 時，有很多東西要學習。 其中一項重大調整是管理代碼何時執行。

一般來說，對於這樣的事情，您希望您的代碼運行：

1. 頁面准備好后一次
2. 每次輸入改變。

由於您多次運行代碼，因此將其放入方法中是有意義的

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

只需將此 function 放入腳本中不會執行 function - 您仍然需要使其在正確的時間執行。 讓它在頁面加載后執行可能會因應用程序而異。 它可以像在腳本標簽中添加updateBoxes()一樣簡單，但通常您需要等待某種渲染。 在不了解您的應用程序的情況下，以下是一個很好的猜測：

$(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
});

---

其他問題

如果這不起作用，可能是因為當您的代碼運行時復選框尚未在 DOM 中。 它們可以由框架添加。 如果它們是由主干添加的，您可以四處尋找添加 html 的主干render方法。 然后你需要在渲染后執行updateBoxes 。

您用於查找輸入的 jquery 選擇器看起來可能會發生變化。 使用name屬性或class或其他方式查找輸入可能更安全。 例如：

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

將 select 輸入<input type="checkbox" name="blahblah">而不使用任何 id。

Answer 2

你應該把你的代碼里面

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

只有當頁面 Document Object Model (DOM) 准備好時，您的代碼才會執行

參考： https://learn.jquery.com/using-jquery-core/document-ready/