如何在单击按钮之前禁用输入

时间:2019-10-25 17:01:37

标签: javascript html

我希望在单击“开始测验”按钮之前,禁用所有输入(收音机,复选框等)(我不想检查它们/键入)。

(这就是我所需要的,这段代码是一个测验,我不希望人们能够在单击释放开始时间的按钮之前开始做它。但是我不知道该怎么做,我是我是这一切的新手。)

	var tacniOdgovori = 0;
	var netacniOdgovori = 0;
	function pocniKviz(){
		vreme1 = new Date();
		var vremeOd = vreme1.getHours() + ":" + vreme1.getMinutes() + ":" + vreme1.getSeconds();
		document.getElementById("vremeOd").innerHTML = vremeOd;
		document.getElementById("btnZapocniKviz").disabled = true;
		document.getElementById("btnZavrsiKviz").disabled = false;
	}
	function zavrsiKviz(){
		var pitanje1 = document.getElementsByName('pitanje1');
		for (var i = 0; i < pitanje1.length; i++)
		{
			if (pitanje1[i].checked)
			{
				if(pitanje1[i].value == "Da"){
					tacniOdgovori = tacniOdgovori + 1;
				}
			}
		}
		var pitanje2 = document.getElementsByName('pitanje2');
		for (var i = 0; i < pitanje2.length; i++)
		{
			if (pitanje2[i].checked)
			{
				if(pitanje2[i].value == "HTTP"){
					tacniOdgovori++;
				}
			}
		}
		if(document.getElementById("pitanje3").value == "interakcija"){
			tacniOdgovori++;
		}
		var pitanje4 = document.getElementsByName('pitanje4');
		for (var i = 0; i < pitanje4.length; i++)
		{
			if (pitanje4[i].checked)
			{
				if(pitanje4[i].value == "Apache" && pitanje4[i].value == "IIS"){
					tacniOdgovori++;
				}
			}
			if (pitanje4[i].checked)
			{
				if(pitanje4[i].value == "Apache" || pitanje4[i].value == "IIS"){
					tacniOdgovori=tacniOdgovori+0.5;
				}
			}
			document.getElementById("btnResetujKviz").disabled = false;
		}
		vreme2 = new Date();
		var vremeDo = vreme2.getHours() + ":" + vreme2.getMinutes() + ":" + vreme2.getSeconds();
		document.getElementById("vremeDo").innerHTML = vremeDo;
		document.getElementById("tacniOdgovori").innerHTML = tacniOdgovori;
		document.getElementById("netacniOdgovori").innerHTML = 4 - tacniOdgovori;
		document.getElementById("rezultat").innerHTML = (tacniOdgovori/4)*100 + "%";
		document.getElementById("btnZavrsiKviz").disabled = true;	
	}
<html>
<head>
</head>
<body style="padding:1%;">
	<h2 align="center">Kviz</h3>
	<button onclick="pocniKviz()" id="btnZapocniKviz">Start Quiz</button>
	<p>Vreme pocetka rada: <span id="vremeOd" style="color:red">span vreme od</span></p>
	<hr>
	<h3>1. Da li je moguce hostovati web sajt na vise web servera?</h3>
	<input type="radio" value="Da" name="pitanje1">Da</input>
	<input type="radio" value="Ne" name="pitanje1">Ne</input>
	<input type="radio" value="Svaki" name="pitanje1">Svaki web sajt se hostuje na vise web servera</input>
	<h3>2. Pomocu kojih protokola je moguce pristupiti sajtovima? (jedan ili vise odgovora)</h3>
	<input type="checkbox" value="FTP" name="pitanje2">FTP</input>
	<input type="checkbox" value= "HTTP" name="pitanje2">HTTP</input>
	<input type="checkbox" value= "SMB" name="pitanje2">SMB</input>
	<input type="checkbox" value= "SSH" name="pitanje2">SSH</input>
	<input type="checkbox" value= "WSP" name="pitanje2">WSP</input>
	<h3>3. Kada korisnik vrsi neku aktivnost na sajtu to se zove <input id="pitanje3"></h3>
	<h3>4. Sta je od navedenog web server? (jedan ili više odgovora)</h3>
	<input type="checkbox" value="Apache" name="pitanje4">Apache</input>
	<input type="checkbox" value="Samba" name="pitanje4">Samba</input>
	<input type="checkbox" value="IIS" name="pitanje4">IIS</input>
	<hr>
	<button onclick="zavrsiKviz()" id="btnZavrsiKviz" disabled>Zavrsi kviz</button>
	<button onClick="window.location.reload()" id="btnResetujKviz" disabled>Resetuj kviz</button>
	<p>Vreme kraja rada: <font color="red"><span id="vremeDo">span vreme do</span></font></p>
	<p>Tacnih odgovora: <font color="green"><span id="tacniOdgovori">span tacnih odgovora</span></font></p>
	<p>Netacnih odgovora: <font color="red"><span id="netacniOdgovori">span netacnih odgovora</span></font></p>
	<p>Uspeh u procentima: <span id="rezultat">span rezultata</span></p>
 
</body>
</html>

2 个答案:

答案 0 :(得分:1)

首先,将disabled属性添加到input元素中,如下所示

<input type="radio" value="Da" name="pitanje1" disabled="disabled">Da</input>

然后,在您的pocniKviz()函数中:

var inputs = document.querySelectorAll('input'); //get all inputs and store into an array

for (i = 0; i < inputs.length; i++) {
    inputs[i].disabled = false; //enable the element
}

您还可以在JS第一行通过script禁用输入:

for (i = 0; i < inputs.length; i++) {
    inputs[i].disabled = true; //disable the element
}

答案 1 :(得分:0)

首先,在输入元素中添加一个禁用的属性,然后 我在一些输入中实现

尝试理解它,然后用其他输入做同样的事情

主要部分已更改

将此代码放入您的开始测验按钮的点击事件中

var input = document.getElementsByTagName("input"); // gets all the input tags as nodelist
var inputList = Array.prototype.slice.call(input); //convert it to array
inputList.forEach(function(element) { // loops through it and then sets disabled = false 
    element.disabled = false;
  });

var tacniOdgovori = 0;
	var netacniOdgovori = 0;
	function pocniKviz(){
		vreme1 = new Date();
		var vremeOd = vreme1.getHours() + ":" + vreme1.getMinutes() + ":" + vreme1.getSeconds();
		document.getElementById("vremeOd").innerHTML = vremeOd;
		document.getElementById("btnZapocniKviz").disabled = true;
		document.getElementById("btnZavrsiKviz").disabled = false;
    var input = document.getElementsByTagName("input"); // gets all the input tags as nodelist
    var inputList = Array.prototype.slice.call(input); //convert it to array
    inputList.forEach(function(element) { // loops through it and then sets disabled = false 
      element.disabled = false;
     });
    
	}
	function zavrsiKviz(){
		var pitanje1 = document.getElementsByName('pitanje1');
		for (var i = 0; i < pitanje1.length; i++)
		{
			if (pitanje1[i].checked)
			{
				if(pitanje1[i].value == "Da"){
					tacniOdgovori = tacniOdgovori + 1;
				}
			}
		}
		var pitanje2 = document.getElementsByName('pitanje2');
		for (var i = 0; i < pitanje2.length; i++)
		{
			if (pitanje2[i].checked)
			{
				if(pitanje2[i].value == "HTTP"){
					tacniOdgovori++;
				}
			}
		}
		if(document.getElementById("pitanje3").value == "interakcija"){
			tacniOdgovori++;
		}
		var pitanje4 = document.getElementsByName('pitanje4');
		for (var i = 0; i < pitanje4.length; i++)
		{
			if (pitanje4[i].checked)
			{
				if(pitanje4[i].value == "Apache" && pitanje4[i].value == "IIS"){
					tacniOdgovori++;
				}
			}
			if (pitanje4[i].checked)
			{
				if(pitanje4[i].value == "Apache" || pitanje4[i].value == "IIS"){
					tacniOdgovori=tacniOdgovori+0.5;
				}
			}
			document.getElementById("btnResetujKviz").disabled = false;
		}
		vreme2 = new Date();
		var vremeDo = vreme2.getHours() + ":" + vreme2.getMinutes() + ":" + vreme2.getSeconds();
		document.getElementById("vremeDo").innerHTML = vremeDo;
		document.getElementById("tacniOdgovori").innerHTML = tacniOdgovori;
		document.getElementById("netacniOdgovori").innerHTML = 4 - tacniOdgovori;
		document.getElementById("rezultat").innerHTML = (tacniOdgovori/4)*100 + "%";
		document.getElementById("btnZavrsiKviz").disabled = true;	
	}
<html>
<head>
</head>
<body style="padding:1%;">
	<h2 align="center">Kviz</h3>
	<button onclick="pocniKviz()" id="btnZapocniKviz">Start Quizz</button>
	<p>Vreme pocetka rada: <span id="vremeOd" style="color:red">span vreme od</span></p>
	<hr>
	<h3>1. Da li je moguce hostovati web sajt na vise web servera?</h3>
	<input type="radio" value="Da" name="pitanje1" disabled>Da</input>
	<input type="radio" value="Ne" name="pitanje1" disabled>Ne</input>
	<input type="radio" value="Svaki" name="pitanje1" disabled>Svaki web sajt se hostuje na vise web servera</input>
	<h3>2. Pomocu kojih protokola je moguce pristupiti sajtovima? (jedan ili vise odgovora)</h3>
	<input type="checkbox" value="FTP" name="pitanje2" disabled>FTP</input>
	<input type="checkbox" value= "HTTP" name="pitanje2" disabled>HTTP</input>
	<input type="checkbox" value= "SMB" name="pitanje2" disabled>SMB</input>
	<input type="checkbox" value= "SSH" name="pitanje2" disabled>SSH</input>
	<input type="checkbox" value= "WSP" name="pitanje2" disabled>WSP</input>
	<h3>3. Kada korisnik vrsi neku aktivnost na sajtu to se zove <input id="pitanje3"></h3>
	<h3>4. Sta je od navedenog web server? (jedan ili više odgovora)</h3>
	<input type="checkbox" value="Apache" name="pitanje4">Apache</input>
	<input type="checkbox" value="Samba" name="pitanje4">Samba</input>
	<input type="checkbox" value="IIS" name="pitanje4">IIS</input>
	<hr>
	<button onclick="zavrsiKviz()" id="btnZavrsiKviz" disabled>Zavrsi kviz</button>
	<button onClick="window.location.reload()" id="btnResetujKviz" disabled>Resetuj kviz</button>
	<p>Vreme kraja rada: <font color="red"><span id="vremeDo">span vreme do</span></font></p>
	<p>Tacnih odgovora: <font color="green"><span id="tacniOdgovori">span tacnih odgovora</span></font></p>
	<p>Netacnih odgovora: <font color="red"><span id="netacniOdgovori">span netacnih odgovora</span></font></p>
	<p>Uspeh u procentima: <span id="rezultat">span rezultata</span></p>
 
</body>
</html>

相关问题