2017-03-06 13 views
0

私はフォームを持っています。私はボタンをクリックした後に有効にしたい。私はhtmlと角度を使用しています。ページの読み込み時にフォームを無効にし、ボタンをクリックして有効にする

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

あなたは、http([、最小完全、かつ検証例]を提供することができます:// stackoverflowの。 com/help/mcve)。 –

+0

内容をすべて無効にしたいのですか? –

+0

@AravindhGopiはい、ボタンをクリックすると、あなたが試したことと働いていないことを示す – bleykFaust

答えて

0

タイプ1:無効にするすべてのHTMLフォーム要素にdisabledを入力するだけです。

ボタンをクリックすると有効になります。

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>

0

使用するには、これはあなたが探しているものですか? 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; 
} 
} 
0

フォームを有効にし、次の

<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> 
関連する問題