在页面加载时禁用表单并在按钮单击时启用答案

【问题标题】：Disable a form on page load and enable on button click在页面加载时禁用表单并在按钮单击时启用
【发布时间】：2017-03-06 05:22:46
【问题描述】：

我有一个表单，我想在第一次进入它时禁用它，或者更确切地说是在页面加载时禁用它。我想在单击按钮后启用它。我正在使用 html 和 angular。

<form name="form" id="form">
 <input type="text">
</form>
 <button type="button">Enable Form</button>

【问题讨论】：

能否提供Minimal, Complete, and Verifiable example。
你的意思是你想禁用它的所有内容？
@AravindhGopi 是的，然后在我单击一个按钮后，它将启用
向我们展示您尝试过但没有成功的方法。

标签： javascript html css forms

【解决方案1】：

类型 1：只需将 disabled 放在每个 html 表单元素中即可禁用。

当点击按钮时启用它们。

function init(){
  var formArray = document.getElementById("myform");
  
  formArray.forEach(function(elements){
  console.log(formArray.elements[0].value);
  });
}

<body onload="init()">
<form id="myform" name="myform">
<input type="text" id="myText" value="123">
<input type="checkbox" id="check">
<input type="radio" id="radio">
<select disabled id="select"><option></option></select>

</form>
<button onclick="myFunction()" type="button">Enable Form</button>
<body>

类型 2：使用 Jquery

 function myFunction(){
  $("#form :input").prop("disabled", false);
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form" name="form">
<input type="text" id="myText" disabled>
<input type="checkbox" id="check" disabled>
<input type="radio" id="radio" disabled>
<select disabled id="select"><option></option></select>

</form>
<button onclick="myFunction()" type="button">Enable Form</button>

【讨论】：

【解决方案2】：

执行以下操作

<form name="form" id="form" style='display:none'>
......
</form
<button type="button" onclick="show()">Enable Form</button>
<script> 
       function show() 
            {           
             document.getElementById('form').style.display="block";
            }
</script>

【讨论】：

【解决方案3】：

这就是你要找的吗？ https://jsfiddle.net/jyzx82ws/1/

<form name="myForm" id="myForm">
<input type="text" />
<br><br>
<select name="s1">
<option value="">Select</option>
<option value="a">A</option>
<option value="b">B</option>
</select>
<br><br>
<input type="radio" name="radio" value="yes">Yes
<input type="radio" name="radio" value="no">No

启用表单

function disableForm(){
 var form = document.getElementById("myForm");
 var elements = form.elements;
 for (var i = 0, len = elements.length; i < len; ++i) {
  elements[i].disabled = true;
 }
}
disableForm();
document.getElementById("enbleForm").addEventListener("click", enableFrm);

function enableFrm(){
 var form = document.getElementById("myForm");
 var elements = form.elements;
for (var i = 0, len = elements.length; i < len; ++i) {
 elements[i].disabled = false;
}
}

【讨论】：