How to control the disability state of HTML inputs using Javascript-CodePudding

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  onclick="switch_monthlyexpense()" id="monthlyexpensestoggle">Expenses</button>
<button  onclick="switch_monthlypexpense()" id="monthlypexpensestoggle">P Expenses</button>


<form id="expenses_form" style="visibility:visible;">
   <div >
   <div >
      <label for="monthlyexpenses" id="monthlyexpenseslabel">Monthly Expenses</label>
      <input type="number"  id="monthlyexpenses" placeholder="0" disabled>
   </div>
       <span  id="dsign5">$</span>
</form>



<form id="pexpenses_form" style="visibility:visible;">
   <div >
   <div >
      <label for="monthlypexpenses" id="monthlypexpenseslabel">Monthly P Expenses</label>
      <input type="number"  id="monthlypexpenses" placeholder="0">
   </div>
       <span  id="psign4">%</span>
</form>

CodePudding user response：

<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  onclick="switchDisabled()" id="switch-button">Switch</button>

<form id="expenses_form" style="visibility:visible;">
   <div >
   <div >
      <label for="monthlyexpenses" id="monthlyexpenseslabel">Monthly Expenses</label>
      <input type="number"  id="monthlyexpenses" placeholder="0" disabled>
   </div>
       <span  id="dsign5">$</span>
</form>



<form id="pexpenses_form" style="visibility:visible;">
   <div >
   <div >
      <label for="monthlypexpenses" id="monthlypexpenseslabel">Monthly P Expenses</label>
      <input type="number"  id="monthlypexpenses" placeholder="0">
   </div>
       <span  id="psign4">%</span>
</form>

CodePudding user response：

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', '');

}