locked
Disable and enable certain textboxes based on radio button RRS feed

  • Question

  • User718515125 posted

    Hello!

    My site is used to keep track of radio maintenance.  The user can update up to 10 radios at a time.  Each radio contains an ON number and a BMR number.  I have two columns of text boxes, each containing 10 text boxes.  The user can select a radio button where the options are "ON" and "BMR".

    What I'm trying to do is have the ON default to enabled and the ON radio button selected when the page loads.  This is already done.  However when the user switches the radio button to "BMR" I want the 10 ON boxes to disable and the 10 BMR boxes to enable (and keep switching when the radio button changes).  I have tried many ways, nothing seems to be working. Anyone have some advice?

     Here is where I gave up:

    (The code only has the first of each box being altered while I attempted to get it to work)

    function ToggleTextBoxON(RadioButton) 
    {
    	if (CheckBox.checked) 
    	{
    		document.getElementById("ON_1").disabled = false;
    		document.getElementById("BMR_1").disabled = true;
    	}
    }
    
    function ToggleTextBoxBMR(RadioButton) 
    {
    	if (CheckBox.checked) 
    	{
    		document.getElementById("BMR_1").disabled = false;
    		document.getElementById("ON_1").disabled = true;
    	}
    }
    Input Select
    <table border=1>
    <tr>
    <td><input type="radio" name="entry_type" id="entry_type_ON" value="ON"  onClick="ToggleTextBoxON(this)" checked>ON0 #</td>
    <td><input type="radio" name="entry_type" id="entry_type_BMR" value="BMR" onClick="ToggleTextBoxBMR(this)" >BMR #</td>
    </tr>
    </table>
    <br>
    <br>
    <table border=1>
    <tr>
    <td>ON</td><td>BMR</td>
    </tr>
    <tr>
    <td><input type="text" maxlength="4" name="ON_1" id="ON_1" size="5" tabindex="1" onKeyup="autotab(this, document.modify.ON_2)"></td><td><input type="text" maxlength="6" name="BMR_1" id="BMR_1" size="7" tabindex="11" onKeyup="autotab(this, document.modify.BMR_2)" disabled></td>
    </tr>
    <tr>
    <td><input type="text" maxlength="4" name="ON_2" size="5" tabindex="2" onKeyup="autotab(this, document.modify.ON_3)"></td><td><input type="text" maxlength="6" name="BMR_2" size="7" tabindex="12" onKeyup="autotab(this, document.modify.BMR_3)"></td>
    </tr>
    <tr>
    <td><input type="text" maxlength="4" name="ON_3" size="5" tabindex="3" onKeyup="autotab(this, document.modify.ON_4)"></td><td><input type="text" maxlength="6" name="BMR_3" size="7" tabindex="13" onKeyup="autotab(this, document.modify.BMR_4)"></td>
    </tr>
    <tr>
    <td><input type="text" maxlength="4" name="ON_4" size="5" tabindex="4" onKeyup="autotab(this, document.modify.ON_5)"></td><td><input type="text" maxlength="6" name="BMR_4" size="7" tabindex="14" onKeyup="autotab(this, document.modify.BMR_5)"></td>
    </tr>
    <tr>
    <td><input type="text" maxlength="4" name="ON_5" size="5" tabindex="5" onKeyup="autotab(this, document.modify.ON_6)"></td><td><input type="text" maxlength="6" name="BMR_5" size="7" tabindex="15" onKeyup="autotab(this, document.modify.BMR_6)"></td>
    </tr>
    <tr>
    <td><input type="text" maxlength="4" name="ON_6" size="5" tabindex="6" onKeyup="autotab(this, document.modify.ON_7)"></td><td><input type="text" maxlength="6" name="BMR_6" size="7" tabindex="16" onKeyup="autotab(this, document.modify.BMR_7)"></td>
    </tr>
    <tr>
    <td><input type="text" maxlength="4" name="ON_7" size="5" tabindex="7" onKeyup="autotab(this, document.modify.ON_8)"></td><td><input type="text" maxlength="6" name="BMR_7" size="7" tabindex="17" onKeyup="autotab(this, document.modify.BMR_8)"></td>
    </tr>
    <tr>
    <td><input type="text" maxlength="4" name="ON_8" size="5" tabindex="8" onKeyup="autotab(this, document.modify.ON_9)"></td><td><input type="text" maxlength="6" name="BMR_8" size="7" tabindex="18" onKeyup="autotab(this, document.modify.BMR_9)"></td>
    </tr>
    <tr>
    <td><input type="text" maxlength="4" name="ON_9" size="5" tabindex="9" onKeyup="autotab(this, document.modify.ON_10)"></td><td><input type="text" maxlength="6" name="BMR_9" size="7" tabindex="19" onKeyup="autotab(this, document.modify.BMR_10)"></td>
    </tr>
    <tr>
    <td><input type="text" maxlength="4" name="ON_10" size="5" tabindex="10"></td><td><input type="text" maxlength="6" name="BMR_10" size="7" tabindex="20"></td>
    </tr>
    </table>
    <br>
    <br>
    <input type="submit" value="Submit">
    

    Wednesday, April 4, 2018 2:29 PM

Answers

  • User2103319870 posted

    If you are using Jquery then the code will be much simpler like below

    <script src="https://code.jquery.com/jquery-1.9.1.js"></script>
        <script>
            $(document).ready(function () {
                $('#entry_type_ON').change(function () {
                    if ($(this).is(':checked')) {
                        $("input[name*='ON']").prop('disabled', true);
                        $("input[name*='BMR']").prop('disabled', false);
                    }
                });
    
                $('#entry_type_BMR').change(function () {
                    if ($(this).is(':checked')) {
                        $("input[name*='ON']").prop('disabled', false);
                        $("input[name*='BMR']").prop('disabled', true);
                    }
                });
            });
        </script>

    Complete Code

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset=utf-8 />
    <script src="https://code.jquery.com/jquery-1.9.1.js"></script>
        <script>
            $(document).ready(function () {
                $('#entry_type_ON').change(function () {
                    if ($(this).is(':checked')) {
                        $("input[name*='ON']").prop('disabled', true);
                        $("input[name*='BMR']").prop('disabled', false);
                    }
                });
    
                $('#entry_type_BMR').change(function () {
                    if ($(this).is(':checked')) {
                        $("input[name*='ON']").prop('disabled', false);
                        $("input[name*='BMR']").prop('disabled', true);
                    }
                });
            });
        </script>
    </head>
    <body>
     <table border=1>
    <tr>
    <td><input type="radio" name="entry_type" id="entry_type_ON" value="ON"  onClick="ToggleTextBoxON(this)" checked>ON0 #</td>
    <td><input type="radio" name="entry_type" id="entry_type_BMR" value="BMR" onClick="ToggleTextBoxBMR(this)" >BMR #</td>
    </tr>
    </table>
    <br>
    <br>
    <table border=1>
    <tr>
    <td>ON</td><td>BMR</td>
    </tr>
    <tr>
    <td><input type="text" maxlength="4" name="ON_1" id="ON_1" size="5" tabindex="1" onKeyup="autotab(this, document.modify.ON_2)"></td><td><input type="text" maxlength="6" name="BMR_1" id="BMR_1" size="7" tabindex="11" onKeyup="autotab(this, document.modify.BMR_2)" disabled></td>
    </tr>
    <tr>
    <td><input type="text" maxlength="4" name="ON_2" size="5" tabindex="2" onKeyup="autotab(this, document.modify.ON_3)"></td><td><input type="text" maxlength="6" name="BMR_2" size="7" tabindex="12" onKeyup="autotab(this, document.modify.BMR_3)"></td>
    </tr>
    <tr>
    <td><input type="text" maxlength="4" name="ON_3" size="5" tabindex="3" onKeyup="autotab(this, document.modify.ON_4)"></td><td><input type="text" maxlength="6" name="BMR_3" size="7" tabindex="13" onKeyup="autotab(this, document.modify.BMR_4)"></td>
    </tr>
    <tr>
    <td><input type="text" maxlength="4" name="ON_4" size="5" tabindex="4" onKeyup="autotab(this, document.modify.ON_5)"></td><td><input type="text" maxlength="6" name="BMR_4" size="7" tabindex="14" onKeyup="autotab(this, document.modify.BMR_5)"></td>
    </tr>
    <tr>
    <td><input type="text" maxlength="4" name="ON_5" size="5" tabindex="5" onKeyup="autotab(this, document.modify.ON_6)"></td><td><input type="text" maxlength="6" name="BMR_5" size="7" tabindex="15" onKeyup="autotab(this, document.modify.BMR_6)"></td>
    </tr>
    <tr>
    <td><input type="text" maxlength="4" name="ON_6" size="5" tabindex="6" onKeyup="autotab(this, document.modify.ON_7)"></td><td><input type="text" maxlength="6" name="BMR_6" size="7" tabindex="16" onKeyup="autotab(this, document.modify.BMR_7)"></td>
    </tr>
    <tr>
    <td><input type="text" maxlength="4" name="ON_7" size="5" tabindex="7" onKeyup="autotab(this, document.modify.ON_8)"></td><td><input type="text" maxlength="6" name="BMR_7" size="7" tabindex="17" onKeyup="autotab(this, document.modify.BMR_8)"></td>
    </tr>
    <tr>
    <td><input type="text" maxlength="4" name="ON_8" size="5" tabindex="8" onKeyup="autotab(this, document.modify.ON_9)"></td><td><input type="text" maxlength="6" name="BMR_8" size="7" tabindex="18" onKeyup="autotab(this, document.modify.BMR_9)"></td>
    </tr>
    <tr>
    <td><input type="text" maxlength="4" name="ON_9" size="5" tabindex="9" onKeyup="autotab(this, document.modify.ON_10)"></td><td><input type="text" maxlength="6" name="BMR_9" size="7" tabindex="19" onKeyup="autotab(this, document.modify.BMR_10)"></td>
    </tr>
    <tr>
    <td><input type="text" maxlength="4" name="ON_10" size="5" tabindex="10"></td><td><input type="text" maxlength="6" name="BMR_10" size="7" tabindex="20"></td>
    </tr>
    </table>
    <br>
    <br>
    <input type="submit" value="Submit">
    </body>
    </html>

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, April 4, 2018 3:05 PM

All replies

  • User2103319870 posted

    If you want a pure javascript solution then you can use document.getElementbyClassName like below

        function ToggleTextBoxON(RadioButton) {
                if (RadioButton.checked) {
                    var bmrelements = [];
                    bmrelements = document.getElementsByClassName("bmrTextBox");
    
                    for (var i = 0; i < bmrelements.length; i++) {
                        bmrelements[i].disabled = true;
                    }
    
                    var onelements = [];
                    onelements = document.getElementsByClassName("onTextBox");
    
                    for (var j = 0; j <= onelements.length; j++) {
                        onelements[j].disabled = false;
                    }
    
                }
            }
    
            function ToggleTextBoxBMR(RadioButton) {
                if (RadioButton.checked) {
                    var bmrelements = [];
                    bmrelements = document.getElementsByClassName("bmrTextBox");
    
                    for (var i = 0; i < bmrelements.length; i++) {
                        bmrelements[i].disabled = false;
                    }
    
                    var onelements = [];
                    onelements = document.getElementsByClassName("onTextBox");
    
                    for (var j = 0; j <= onelements.length; j++) {
                        onelements[j].disabled = true;
                    }
    
                }
            }

    You also need to assign a class to your textbox controls

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset=utf-8 />
    <title>JS Bin</title>
    </head>
    <body>
      <table border=1>
    <tr>
    <td><input type="radio" name="entry_type" id="entry_type_ON" value="ON"  onClick="ToggleTextBoxON(this)" checked>ON0 #</td>
    <td><input type="radio" name="entry_type" id="entry_type_BMR" value="BMR" onClick="ToggleTextBoxBMR(this)" >BMR #</td>
    </tr>
    </table>
    <br>
    <br>
    <table border=1>
    <tr>
    <td>ON</td><td>BMR</td>
    </tr>
    <tr>
    <td><input type="text" maxlength="4" class="onTextBox" name="ON_1" id="ON_1" size="5" tabindex="1" onKeyup="autotab(this, document.modify.ON_2)"></td><td><input type="text" maxlength="6" name="BMR_1" class="bmrTextBox" id="BMR_1" size="7" tabindex="11" onKeyup="autotab(this, document.modify.BMR_2)" disabled></td>
    </tr>
    <tr>
    <td><input type="text" maxlength="4" class="onTextBox" name="ON_2" size="5" tabindex="2" onKeyup="autotab(this, document.modify.ON_3)"></td><td><input type="text" maxlength="6" name="BMR_2" size="7" class="bmrTextBox" tabindex="12" onKeyup="autotab(this, document.modify.BMR_3)"></td>
    </tr>
    <tr>
    <td><input type="text" maxlength="4" class="onTextBox" name="ON_3" size="5" tabindex="3" onKeyup="autotab(this, document.modify.ON_4)"></td><td><input type="text" maxlength="6" name="BMR_3" size="7" class="bmrTextBox" tabindex="13" onKeyup="autotab(this, document.modify.BMR_4)"></td>
    </tr>
    <tr>
    <td><input type="text" maxlength="4" class="onTextBox" name="ON_4" size="5" tabindex="4" onKeyup="autotab(this, document.modify.ON_5)"></td><td><input type="text" maxlength="6" name="BMR_4" size="7" class="bmrTextBox" tabindex="14" onKeyup="autotab(this, document.modify.BMR_5)"></td>
    </tr>
    <tr>
    <td><input type="text" maxlength="4" class="onTextBox" name="ON_5" size="5" tabindex="5" onKeyup="autotab(this, document.modify.ON_6)"></td><td><input type="text" maxlength="6" name="BMR_5" size="7"  class="bmrTextBox" tabindex="15" onKeyup="autotab(this, document.modify.BMR_6)"></td>
    </tr>
    <tr>
    <td><input type="text" maxlength="4" class="onTextBox" name="ON_6" size="5" tabindex="6" onKeyup="autotab(this, document.modify.ON_7)"></td><td><input type="text" maxlength="6" name="BMR_6" size="7" class="bmrTextBox" tabindex="16" onKeyup="autotab(this, document.modify.BMR_7)"></td>
    </tr>
    <tr>
    <td><input type="text" maxlength="4" class="onTextBox" name="ON_7" size="5" tabindex="7" onKeyup="autotab(this, document.modify.ON_8)"></td><td><input type="text" maxlength="6" name="BMR_7" size="7" class="bmrTextBox" tabindex="17" onKeyup="autotab(this, document.modify.BMR_8)"></td>
    </tr>
    <tr>
    <td><input type="text" maxlength="4" class="onTextBox" name="ON_8" size="5" tabindex="8" onKeyup="autotab(this, document.modify.ON_9)"></td><td><input type="text" maxlength="6" name="BMR_8" size="7" class="bmrTextBox" tabindex="18" onKeyup="autotab(this, document.modify.BMR_9)"></td>
    </tr>
    <tr>
    <td><input type="text" maxlength="4" class="onTextBox" name="ON_9" size="5" tabindex="9" onKeyup="autotab(this, document.modify.ON_10)"></td><td><input type="text" maxlength="6" name="BMR_9" size="7" class="bmrTextBox" tabindex="19" onKeyup="autotab(this, document.modify.BMR_10)"></td>
    </tr>
    <tr>
    <td><input type="text" maxlength="4" class="onTextBox" name="ON_10" size="5" tabindex="10"></td><td><input type="text" maxlength="6" class="bmrTextBox" name="BMR_10" size="7" tabindex="20"></td>
    </tr>
    </table>
    <br>
    <br>
    <input type="submit" value="Submit">
    </body>
    </html>
    Wednesday, April 4, 2018 2:53 PM
  • User2103319870 posted

    If you are using Jquery then the code will be much simpler like below

    <script src="https://code.jquery.com/jquery-1.9.1.js"></script>
        <script>
            $(document).ready(function () {
                $('#entry_type_ON').change(function () {
                    if ($(this).is(':checked')) {
                        $("input[name*='ON']").prop('disabled', true);
                        $("input[name*='BMR']").prop('disabled', false);
                    }
                });
    
                $('#entry_type_BMR').change(function () {
                    if ($(this).is(':checked')) {
                        $("input[name*='ON']").prop('disabled', false);
                        $("input[name*='BMR']").prop('disabled', true);
                    }
                });
            });
        </script>

    Complete Code

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset=utf-8 />
    <script src="https://code.jquery.com/jquery-1.9.1.js"></script>
        <script>
            $(document).ready(function () {
                $('#entry_type_ON').change(function () {
                    if ($(this).is(':checked')) {
                        $("input[name*='ON']").prop('disabled', true);
                        $("input[name*='BMR']").prop('disabled', false);
                    }
                });
    
                $('#entry_type_BMR').change(function () {
                    if ($(this).is(':checked')) {
                        $("input[name*='ON']").prop('disabled', false);
                        $("input[name*='BMR']").prop('disabled', true);
                    }
                });
            });
        </script>
    </head>
    <body>
     <table border=1>
    <tr>
    <td><input type="radio" name="entry_type" id="entry_type_ON" value="ON"  onClick="ToggleTextBoxON(this)" checked>ON0 #</td>
    <td><input type="radio" name="entry_type" id="entry_type_BMR" value="BMR" onClick="ToggleTextBoxBMR(this)" >BMR #</td>
    </tr>
    </table>
    <br>
    <br>
    <table border=1>
    <tr>
    <td>ON</td><td>BMR</td>
    </tr>
    <tr>
    <td><input type="text" maxlength="4" name="ON_1" id="ON_1" size="5" tabindex="1" onKeyup="autotab(this, document.modify.ON_2)"></td><td><input type="text" maxlength="6" name="BMR_1" id="BMR_1" size="7" tabindex="11" onKeyup="autotab(this, document.modify.BMR_2)" disabled></td>
    </tr>
    <tr>
    <td><input type="text" maxlength="4" name="ON_2" size="5" tabindex="2" onKeyup="autotab(this, document.modify.ON_3)"></td><td><input type="text" maxlength="6" name="BMR_2" size="7" tabindex="12" onKeyup="autotab(this, document.modify.BMR_3)"></td>
    </tr>
    <tr>
    <td><input type="text" maxlength="4" name="ON_3" size="5" tabindex="3" onKeyup="autotab(this, document.modify.ON_4)"></td><td><input type="text" maxlength="6" name="BMR_3" size="7" tabindex="13" onKeyup="autotab(this, document.modify.BMR_4)"></td>
    </tr>
    <tr>
    <td><input type="text" maxlength="4" name="ON_4" size="5" tabindex="4" onKeyup="autotab(this, document.modify.ON_5)"></td><td><input type="text" maxlength="6" name="BMR_4" size="7" tabindex="14" onKeyup="autotab(this, document.modify.BMR_5)"></td>
    </tr>
    <tr>
    <td><input type="text" maxlength="4" name="ON_5" size="5" tabindex="5" onKeyup="autotab(this, document.modify.ON_6)"></td><td><input type="text" maxlength="6" name="BMR_5" size="7" tabindex="15" onKeyup="autotab(this, document.modify.BMR_6)"></td>
    </tr>
    <tr>
    <td><input type="text" maxlength="4" name="ON_6" size="5" tabindex="6" onKeyup="autotab(this, document.modify.ON_7)"></td><td><input type="text" maxlength="6" name="BMR_6" size="7" tabindex="16" onKeyup="autotab(this, document.modify.BMR_7)"></td>
    </tr>
    <tr>
    <td><input type="text" maxlength="4" name="ON_7" size="5" tabindex="7" onKeyup="autotab(this, document.modify.ON_8)"></td><td><input type="text" maxlength="6" name="BMR_7" size="7" tabindex="17" onKeyup="autotab(this, document.modify.BMR_8)"></td>
    </tr>
    <tr>
    <td><input type="text" maxlength="4" name="ON_8" size="5" tabindex="8" onKeyup="autotab(this, document.modify.ON_9)"></td><td><input type="text" maxlength="6" name="BMR_8" size="7" tabindex="18" onKeyup="autotab(this, document.modify.BMR_9)"></td>
    </tr>
    <tr>
    <td><input type="text" maxlength="4" name="ON_9" size="5" tabindex="9" onKeyup="autotab(this, document.modify.ON_10)"></td><td><input type="text" maxlength="6" name="BMR_9" size="7" tabindex="19" onKeyup="autotab(this, document.modify.BMR_10)"></td>
    </tr>
    <tr>
    <td><input type="text" maxlength="4" name="ON_10" size="5" tabindex="10"></td><td><input type="text" maxlength="6" name="BMR_10" size="7" tabindex="20"></td>
    </tr>
    </table>
    <br>
    <br>
    <input type="submit" value="Submit">
    </body>
    </html>

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, April 4, 2018 3:05 PM
  • User718515125 posted

    That works perfect!  Thank you!

    Wednesday, April 4, 2018 3:38 PM