How to make inputs disabled until button is clicked

Question

I want all inputs (radios, checkboxes, etc..) to be disabled (I don't want to be able to check them/ type) until "Start Quiz" button is clicked.

(That's all I need, this code is a quiz and I don't want people to be able to start doing it before clicking that button that releases starting time. But I don't know how to do it, I'm new to all this.)

 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; 
 }





 Kviz
 
 Vreme pocetka rada: span vreme od
 
 1. Da li je moguce hostovati web sajt na vise web servera?
 Da
 Ne
 Svaki web sajt se hostuje na vise web servera
 2. Pomocu kojih protokola je moguce pristupiti sajtovima? (jedan ili vise odgovora)
 FTP
 HTTP
 SMB
 SSH
 WSP
 3. Kada korisnik vrsi neku aktivnost na sajtu to se zove 
 4. Sta je od navedenog web server? (jedan ili više odgovora)
 Apache
 Samba
 IIS
 
 
 
 Vreme kraja rada: span vreme do
 Tacnih odgovora: span tacnih odgovora
 Netacnih odgovora: span netacnih odgovora
 Uspeh u procentima: span rezultata

user_11813677 · Answer

First, add a disabled property to your input elements, like this

Da

Then, inside your pocniKviz() function:

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
}

you can also disable your inputs through JS, on the first line of your script:

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

user_6121643 · Answer

First, add a disabled property to your input elements and then I implemented in some of the inputs

try to understand it and then do same thing with other inputs

Main Part Changed

put this code into your start Quiz button's click event

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; 
 }





 Kviz
 
 Vreme pocetka rada: span vreme od
 
 1. Da li je moguce hostovati web sajt na vise web servera?
 Da
 Ne
 Svaki web sajt se hostuje na vise web servera
 2. Pomocu kojih protokola je moguce pristupiti sajtovima? (jedan ili vise odgovora)
 FTP
 HTTP
 SMB
 SSH
 WSP
 3. Kada korisnik vrsi neku aktivnost na sajtu to se zove 
 4. Sta je od navedenog web server? (jedan ili više odgovora)
 Apache
 Samba
 IIS
 
 
 
 Vreme kraja rada: span vreme do
 Tacnih odgovora: span tacnih odgovora
 Netacnih odgovora: span netacnih odgovora
 Uspeh u procentima: span rezultata

How to make inputs disabled until button is clicked

2 Answers