He estado tratando de alternar entre los estados de discapacidad de dos entradas en mi sitio web usando un botón adjunto a algún JavaScript. Mi código actual tiene dos botones en uso que deshabilitan una entrada y habilitan la otra, sin embargo, esto no es muy práctico. Quería saber cómo puedo usar un botón y un script para alternar entre los estados de discapacidad de mis entradas, este es mi código actual:
<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>disabled es un atributo, por lo que puede configurarlo:
document.getElementById("myId").setAttribute('disabled', '');Y para habilitar el elemento:
document.getElementById("myId").removeAttribute('disabled');Su primera función se verá así:
function switch_monthlyexpense() { document.getElementById("monthlyexpenses").removeAttribute('disabled'); document.getElementById("monthlypexpenses").setAttribute('disabled', ''); }<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>