Question

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

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

Answer 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>

Answer 2

这是你在找什么？ 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;
}
}

Answer 3

执行以下操作

<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 个答案: