'How to control the disability state of HTML inputs using Javascript

I have been trying to cycle between the disability states of two inputs on my website by using a button attached to some JavaScript. My current code has two buttons in use which both disable one input and enable the other, however this is not very practical. I wanted to know how I can use one button and one script to cycle between the disability states of my inputs, this is my current code:

<script>
function switch_monthlyexpense()
{
    document.getElementById("monthlyexpenses").disabled=false;
    document.getElementById("monthlypexpenses").disabled=true;

}

</script>

<script>
function switch_monthlypexpense()
{
    document.getElementById("monthlyexpenses").disabled=true;
    document.getElementById("monthlypexpenses").disabled=false;

}

</script>

<button class="btn btn-primary" onclick="switch_monthlyexpense()" id="monthlyexpensestoggle">Expenses</button>
<button class="btn btn-primary" onclick="switch_monthlypexpense()" id="monthlypexpensestoggle">P Expenses</button>


<form id="expenses_form" style="visibility:visible;">
   <div class="form-group">
   <div class="form-group col-md-1">
      <label for="monthlyexpenses" id="monthlyexpenseslabel">Monthly Expenses</label>
      <input type="number" class="form-control" id="monthlyexpenses" placeholder="0" disabled>
   </div>
       <span class="input-group-text" id="dsign5">$</span>
</form>



<form id="pexpenses_form" style="visibility:visible;">
   <div class="form-group">
   <div class="form-group col-md-1">
      <label for="monthlypexpenses" id="monthlypexpenseslabel">Monthly P Expenses</label>
      <input type="number" class="form-control" id="monthlypexpenses" placeholder="0">
   </div>
       <span class="input-group-text" id="psign4">%</span>
</form>
javascripthtml


Solution 1:[1]

<script>
// use a variable to note which one is disabled
let selected = "monthlyexpenses"

function switchDisabled () {
    // toggle the from "monthlyexpenses" to "monthlypexpenses" or vice versa
    selected = selected === "monthlyexpenses" ? "monthlypexpenses" : "monthlyexpenses"
    
    // check if the DOM disabled state is the same as the selected
    document.getElementById("monthlyexpenses").disabled = selected === "monthlyexpenses";
    document.getElementById("monthlypexpenses").disabled = selected === "monthlypexpenses";

}

</script>

<button class="btn btn-primary" onclick="switchDisabled()" id="switch-button">Switch</button>

<form id="expenses_form" style="visibility:visible;">
   <div class="form-group">
   <div class="form-group col-md-1">
      <label for="monthlyexpenses" id="monthlyexpenseslabel">Monthly Expenses</label>
      <input type="number" class="form-control" id="monthlyexpenses" placeholder="0" disabled>
   </div>
       <span class="input-group-text" id="dsign5">$</span>
</form>



<form id="pexpenses_form" style="visibility:visible;">
   <div class="form-group">
   <div class="form-group col-md-1">
      <label for="monthlypexpenses" id="monthlypexpenseslabel">Monthly P Expenses</label>
      <input type="number" class="form-control" id="monthlypexpenses" placeholder="0">
   </div>
       <span class="input-group-text" id="psign4">%</span>
</form>

Solution 2:[2]

disabled is an attribute so you can set it by:

document.getElementById("myId").setAttribute('disabled', '');

And to enable the element:

document.getElementById("myId").removeAttribute('disabled');

Your first function will look like:

function switch_monthlyexpense()
{
    document.getElementById("monthlyexpenses").removeAttribute('disabled');
    document.getElementById("monthlypexpenses").setAttribute('disabled', '');

}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Matteo
Solution 2 Brayan Tiwa

Related Questions