Best way to disable and enable textboxes

user_3872094 0
Viewed 167

I'm writing a simple html code that does enable and disable some textboxes on button clicks. Below is my code.

function myFunction1() {
  document.querySelector('#myText0').disabled = true;
  document.querySelector('#myText1').disabled = true;
  document.querySelector('#myText2').disabled = false;
  document.querySelector('#myText3').disabled = false;
  document.querySelector('#myText4').disabled = false;
}

function myFunction2() {
  document.querySelector('#myText0').disabled = false;
  document.querySelector('#myText1').disabled = false;
  document.querySelector('#myText2').disabled = true;
  document.querySelector('#myText3').disabled = true;
  document.querySelector('#myText4').disabled = true;
}


function myFunction3() {
  document.querySelectorAll("input").disabled = true;
  document.querySelector('#myText2').disabled = false;
  document.querySelector('#myText3').disabled = false;
  document.querySelector('#myText4').disabled = false;
}

function myFunction4() {
  document.querySelector("input").disabled = true;
  document.querySelector('#myText0').disabled = false;
  document.querySelector('#myText1').disabled = false;
}
input{
  display:block;
  margin:0.85em
}
<input type="text" id="myText0" label="myText0" disabled>
<input type="text" id="myText1" label="myText1" disabled>
<input type="text" id="myText2" label="myText2" disabled>
<input type="text" id="myText3" label="myText3" disabled>
<input type="text" id="myText4" label="myText4" disabled>
<h2>
Manually Enabling text boxes
</h2>
<button onclick="myFunction1()">Disable 0,1 field</button>
<button onclick="myFunction2()">Disable Rest field other than 0,1</button>
<br/>
<h2>
Disabling All initially and then enabling the required text boxes 
</h2>
<button onclick="myFunction3()">Disable 0,1 field</button>
<button onclick="myFunction4()">Disable Rest field other than 0,1</button>

I've got a total of 120 textboxes so I'm looking for a better way to do this. In my above code, the buttons under Manually Enabling text boxes are working as expected. Whereas, the other approach that I thought of under Disabling All initially and then enabling the required text boxes is not working as expected. Also Please let me know if there is a better approach than what I've used as there are 120 textboxes and my approach is the most time-taking as I'm checking manually and my 2nd approach is saving 25% of the total time (considering 120 textboxes and the number of them to be disabled that were provided as part of my SRS).

Thanks

html javascript
3 Answers

You can make simple common methods that will 'cascade' the logic for you rather than defining each operation repeatedly. Take a look at the attached fiddle (and its code snippet)

function myFunc1() {
  enableAll();
  disableTextbox('#myText0');
  disableTextbox('#myText1');
}

function myFunc2() {
  disableAll();
  enableTextbox('#myText0');
  enableTextbox('#myText1');
}

/* Common functions */

function disableAll() {
  disableTextbox('#myText0');
  disableTextbox('#myText1');
  disableTextbox('#myText2');
  disableTextbox('#myText3');
  disableTextbox('#myText4');
}

function enableAll() {
  enableTextbox('#myText0');
  enableTextbox('#myText1');
  enableTextbox('#myText2');
  enableTextbox('#myText3');
  enableTextbox('#myText4');
}

function disableTextbox(textboxName) {
  document.querySelector(textboxName).disabled = true;
}

function enableTextbox(textboxName) {
  document.querySelector(textboxName).disabled = false;
}

/* Common functions */
input{
  display:block;
  margin:0.85em
}
<input type="text" id="myText0" label="myText0" disabled>
<input type="text" id="myText1" label="myText1" disabled>
<input type="text" id="myText2" label="myText2" disabled>
<input type="text" id="myText3" label="myText3" disabled>
<input type="text" id="myText4" label="myText4" disabled>
<h1>Proper way to do it</h1>
<button onclick="myFunc1()">Disable 0,1 field</button>
<button onclick="myFunc2()">Disable Rest field other than 0,1</button>

user_31814240

you can use for, and for each "input type" or "class":

function myFunction1() {
   //var inputs = document.querySelectorAll('input[type=text]'); //use this or below
 var inputs = document.querySelectorAll('input[class=ttt]');
 for (var i = 0; i < inputs.length; i++) {
   inputs[i].disabled = false; // or true
    //inputs[i].style.display = 'none';
  }
  }
 function myFunction2() {
 //var inputs = document.querySelectorAll('input[type=text]'); //use this or below
  var inputs = document.querySelectorAll('input[class=ttt]');
 for (var i = 0; i < inputs.length; i++) {
 inputs[i].disabled = true; // or false
 //inputs[i].style.display = 'none';
 }
}
input{
display:block;
margin: 0.85em
}
<input type="text" id="myText0" class="ttt" label="myText0" disabled>
 <input type="text" id="myText1" class="ttt" label="myText1" disabled>
 <input type="text" id="myText2" class="ttt" label="myText2" disabled>
 <input type="text" id="myText3" class="ttt" label="myText3" disabled>
 <input type="text" id="myText4" class="ttt" label="myText4" disabled>
 <h2>
  Manually Enabling text boxes
</h2>
<button onclick="myFunction1()">enable all field</button>
 <button onclick="myFunction2()">disable all field</button>

user_126391650

I think the best way to do this is to specify the reason for disabling in a class or even a data attribute. For simplicity let's use a class. So for example an input should be disabled because of any reason you give it a class (or data attr) with the value of the name of that reason. This will make your code very readable even without reading over the javascript files. And you will not write much of javascript at all.

That would make your elements that should be enabled together, together, and vice versa.

I would suggest this solution:

function disable(className) {
  for (const element of document.getElementsByClassName(className)) {
    element.disabled = true;
  }
}

function enable(className) {
  for (const element of document.getElementsByClassName(className)) {
    element.disabled = false;
  }
}
input{
  display:block;
  margin:0.85em
}
<input type="text" class="reason1" label="myText0" disabled>
<input type="text" class="reason1" label="myText1" disabled>
<input type="text" class="reason2" label="myText2" disabled>
<input type="text" class="reason2" label="myText3" disabled>
<input type="text" class="reason2" label="myText4" disabled>
<h2>
  Manually Enabling text boxes
</h2>
<button onclick="disable('reason1'); enable('reason2')">Disable 0,1 field</button>
<button onclick="disable('reason2'); enable('reason1')">Disable Rest field other than 0,1</button>
<br />
<h2>
  Disabling All initially and then enabling the required text boxes
</h2>
<button onclick="disable('reason1'); enable('reason2')">Disable 0,1 field</button>
<button onclick="enable('reason1'); disable('reason2')">Disable Rest field other than 0,1</button>

user_27630280
Related