无法让我的 Javascript 代码禁用加载页面上的输入框

Question

我在 html 文件中有一个带有下拉列表的表单，当选择某个值时，该下拉列表会禁用输入框。它工作得很好，但是当用户单击表单的提交按钮时，它会在完成一些计算后刷新页面并启用输入框。我希望它保持禁用状态。我设法存储下拉列表的值，但无法对我的输入框执行相同的操作。我对 JS 的了解几乎为零，但我想出了以下脚本，我认为该脚本应该在页面重新加载时完成工作，但事实并非如此。您能告诉我下面的代码有什么问题吗？谢谢！  <script type="text/javascript">    $(document).ready(function() {      var ComboboxType = document.getElementById('Type').value;      var InputToDisable = document.getElementById("MyInput");      if (ComboboxType.value == 'Some Value') {          InputToDisable.disabled = true;      }    });  </script>

Answer 1

您甚至可以在没有 jQuery 的情况下完成此操作，请参阅下面的示例。

基本上，您可以使用 获取输入元素document.getElementById。然后，为了安全起见，我检查它是否存在。那么，只需禁用它即可。

window.onload = function(e) {

  var input = document.getElementById("input");

  if(input) {

    input.disabled = true;

  }

}

<input name="foo" id="input" placeholder="disabled" />

Answer 2

好吧，您可以在 jQuery 中创建一个 ajax 请求（据我所知，您在代码中使用了这个库）来处理刷新问题。 https://api.jquery.com/jquery.ajax/

例子：

  $("#my_form").submit(function(event){

        event.preventDefault(); //prevent default action 

        var post_url = $(this).attr("action"); //get form action url

        var request_method = $(this).attr("method"); //get form GET/POST method

        var form_data = $(this).serialize(); //Encode form elements for submission

        $.ajax({

           url : post_url,

           type: request_method,

           data : form_data,

           success: (response) => {   

               if(response){

                  //do something

               }

           }

        });

    });