Toggle Switch Buttons in jQuery

slb2013

SOLVED CLOSED ACTIVE ANSWERED
User: slb2013
Posted: on Oct 30, 2022 11:18 PM
Forum: jQuery and jQuery Plugins
Answer: 1
Views: 1322

I have :

BntGateway | AddGateway:____ (input) | Enter | Clear Gateways

I am trying to make a switch button between the button Sensor and the button Gateway.

When I click the button Sensor the button Gateway stays in function for the click but the title text, the input text area, the button Enter, and the button ClearGateway should grey out disabled.

If I clicked Button Gateway the button Sensor stays in function for the click but the title text, the input text area, the button Enter, Reset all for Shipping, Set all sensors to 10HB and clear Sensor should grey out disabled.

See the code (html/aspx):

<div class="col-12 col-md-10 col-xl-12">
    <button type="button" id="btnSensor" data-id="sensorsList" data-toggleclass="btnToggle" data-togglepane="tab-pane" class="btn btn-primary btn-sm btnToggle -active" onclick="ToggleButtons('btnSensor');"> > &nbsp;Sensor &nbsp;</button>
    <strong style="font-size : 15px;" id="AddSensortitle">&nbsp; &nbsp; Add Sensor:</strong> <input type="text" id="AddSensorID" class="float-right" value="" />
    <button type="button" class="btn btn-secondary btn-m fa-regular fa fa-search" role="button" aria-hidden="true" id="addSensorBtn" data-url="/Testing/AddSensor/"> &nbsp; Enter &nbsp;</button>
    <button type="button" class="btn btn-primary  b-btn actionBtn  btn-lg fa fa-refresh" aria-hidden="true" id="resetAllForShipping" data-url="/Testing/ResetAllForShipping/">&nbsp; Reset all for Shipping &nbsp;</button>
    <button type="button" class="btn btn-primary   b-btn actionBtn btn-lg fa fa-cogs" aria-hidden="true" id="setAllSensorsTo10HB" data-url="/Testing/AllSensorsTo10HeartBeat">&nbsp;  Set all sensors to 10 HB &nbsp;</button>
    <button type="button" class="btn btn-primary b-btn actionBtn btn-lg fa fa-trash-o" aria-hidden="true" id="clearSensors" data-url="/Testing/ClearSensors/">&nbsp; Clear Sensors&nbsp;</button>
 
    <br />
    <div class="clearfix"></div>
    <br />
 
    <button type="button" id="btnGateway" data-id="gatewaysList" data-toggleclass="btnToggle" data-togglepane="tab-pane" class="btn btn-primary btn-sm btnToggle inactive" onclick="ToggleButtons('bntGateway');" style="display;">  &nbsp;Gateway</button>
    <strong style="font-size : 15px;" id="addGatewaytitle">&nbsp; Add Gateway:</strong> <input type="text" id="AddGatewayID" class="float-right" value="" />
    <button type="button" class="btn btn-secondary btn-m fa-regular fa fa-search" role="button" aria-hidden="true" id="addgatewayBtn" data-url="/Testing/AddGateway/"> &nbsp; Enter &nbsp;</button>
    <button type="button" class="btn btn-primary  b-btn actionBtn btn-lg fa fa-trash-o" aria-hidden="true" id="clearGateways" data-url="/Testing/ClearGateways/">&nbsp; Clear Gateways &nbsp; </button>
</div>

jQuery:

<script>
    function ToggleButtons(buttonId) {
        var hideBtn, showBtn;
        if (buttonId == 'btnSensor') {
            showBtn = 'btnSensor';
            hideBtn = 'btnGateway';
        } else {
            showBtn = 'btnGateway';
            hideBtn = 'btnSensor';
            document.getElementById("btnSensor").disabled = false;
            document.getElementById("addSensorBtn").disabled = true;
            document.getElementById("resetAllForShipping").disabled = true;
            document.getElementById("setAllSensorsTo10HB").disabled = true;
            document.getElementById("clearSensors").disabled = true;
            document.getElementById("addSensortitle").disabled = true;
        } if (buttonId == 'btnGateway') {
            showBtn = 'btnGateway';
            hideBtn = 'btnSensor';
        } else {
            showBtn = 'btnSensor';
            document.getElementById("btnSensor").disabled = false;
            document.getElementById("addSensorBtn").disabled = false;
            document.getElementById("resetAllForShipping").disabled = false;
            document.getElementById("setAllSensorsTo10HB").disabled = false;
            document.getElementById("clearSensors").disabled = false;
            document.getElementById("addSensortitle").disabled = false;
        } if (buttonId == 'btnGateway') {
            document.getElementById("btnSensor").disabled = false;
            document.getElementById("addSensorBtn").disabled = false;
            document.getElementById("resetAllForShipping").disabled = false;
            document.getElementById("setAllSensorsTo10HB").disabled = false;
            document.getElementById("clearSensors").disabled = false;
            document.getElementById("addSensortitle").disabled = false;
        }
        else {
            hideBtn = 'btnGateway';
            document.getElementById("btnGateway").disabled = false;
            document.getElementById("addGatewayBtn").disabled = true;
            document.getElementById("clearGateway").disabled = true;
            document.getElementById("addGatewaytitle").disabled = true;
        }
        document.getElementById(hideBtn).style.display = 'disabled';
        document.getElementById(showBtn).style.display = 'enabled';
    }
</script>

Thanks for your help.

Download FREE API for Word, Excel and PDF in ASP.Net

Shivam.M

0 2

Reply
ANSWER
User: Shivam.M
Replied: on Oct 31, 2022 02:39 AM
Modified: on Nov 01, 2022 04:20 AM
Report

Hi slb2013,

Please refer below sample.

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
    <form id="form1" runat="server">
        <div class="col-12 col-md-10 col-xl-12">
            <button type="button" id="btnSensor" data-id="sensorsList" data-toggleclass="btnToggle" data-togglepane="tab-pane" class="btn btn-primary btn-sm btnToggle -active" onclick="ToggleButtons('btnSensor');">&nbsp;Sensor &nbsp;</button>
            <strong id="AddSensortitle">&nbsp; &nbsp; Add Sensor:</strong>
            <input type="text" id="AddSensorID" class="float-right" value="" />
            <button type="button" class="btn btn-secondary btn-m fa-regular fa fa-search" role="button" aria-hidden="true" id="addSensorBtn" data-url="/Testing/AddSensor/">&nbsp; Enter &nbsp;</button>
            <button type="button" class="btn btn-primary  b-btn actionBtn  btn-lg fa fa-refresh" aria-hidden="true" id="resetAllForShipping" data-url="/Testing/ResetAllForShipping/">&nbsp; Reset all for Shipping &nbsp;</button>
            <button type="button" class="btn btn-primary   b-btn actionBtn btn-lg fa fa-cogs" aria-hidden="true" id="setAllSensorsTo10HB" data-url="/Testing/AllSensorsTo10HeartBeat">&nbsp;  Set all sensors to 10 HB &nbsp;</button>
            <button type="button" class="btn btn-primary b-btn actionBtn btn-lg fa fa-trash-o" aria-hidden="true" id="clearSensors" data-url="/Testing/ClearSensors/">&nbsp; Clear Sensors&nbsp;</button>

            <br />
            <div class="clearfix"></div>
            <br />

            <button type="button" id="btnGateway" data-id="gatewaysList" data-toggleclass="btnToggle" data-togglepane="tab-pane" class="btn btn-primary btn-sm btnToggle inactive" onclick="ToggleButtons('btnGateway');">&nbsp;Gateway</button>
            <strong id="addGatewaytitle">&nbsp; Add Gateway:</strong>
            <input type="text" id="AddGatewayID" class="float-right" value="" />
            <button type="button" class="btn btn-secondary btn-m fa-regular fa fa-search" role="button" aria-hidden="true" id="addgatewayBtn" data-url="/Testing/AddGateway/">&nbsp; Enter &nbsp;</button>
            <button type="button" class="btn btn-primary  b-btn actionBtn btn-lg fa fa-trash-o" aria-hidden="true" id="clearGateways" data-url="/Testing/ClearGateways/">&nbsp; Clear Gateways &nbsp; </button>
        </div>

        <script type="text/javascript">
            function ToggleButtons(buttonId) {
                var hideBtn, showBtn;
                if (buttonId == 'btnSensor') {
                    showBtn = 'btnSensor';
                    hideBtn = 'btnGateway';
                }
                else {
                    showBtn = 'btnGateway';
                    hideBtn = 'btnSensor';
                    document.getElementById("btnSensor").disabled = false;
                    document.getElementById("AddSensorID").disabled = true;
                    document.getElementById("addSensorBtn").disabled = true;
                    document.getElementById("resetAllForShipping").disabled = true;
                    document.getElementById("setAllSensorsTo10HB").disabled = true;
                    document.getElementById("clearSensors").disabled = true;
                    document.getElementById("AddSensortitle").style.color = "grey";
                }
                if (buttonId == 'btnGateway') {
                    showBtn = 'btnGateway';
                    hideBtn = 'btnSensor';
                }
                else {
                    hideBtn = 'btnGateway';
                    document.getElementById("btnGateway").disabled = false;
                    document.getElementById("AddGatewayID").disabled = true;
                    document.getElementById("addgatewayBtn").disabled = true;
                    document.getElementById("clearGateways").disabled = true;
                    document.getElementById("addGatewaytitle").style.color = "grey";
                }
                if (buttonId == 'btnSensor') {
                    showBtn = 'btnGateway';
                    hideBtn = 'btnSensor';
                    document.getElementById("btnSensor").disabled = false;
                    document.getElementById("AddSensorID").disabled = false;
                    document.getElementById("addSensorBtn").disabled = false;
                    document.getElementById("resetAllForShipping").disabled = false;
                    document.getElementById("setAllSensorsTo10HB").disabled = false;
                    document.getElementById("clearSensors").disabled = false;
                    document.getElementById("AddSensortitle").style.color = "black";
                }
                if (buttonId == 'btnGateway') {
                    document.getElementById("btnGateway").disabled = false;
                    document.getElementById("AddGatewayID").disabled = false;
                    document.getElementById("addgatewayBtn").disabled = false;
                    document.getElementById("clearGateways").disabled = false;
                    document.getElementById("addGatewaytitle").style.color = "black";
                }
            }
        </script>
    </form>
</body>
</html>

Screenshot

I agree, here is the link: https://www.e-iceblue.com/Introduce/spire-office-for-net-free.html

Toggle Switch Buttons in jQuery

Company

Explore

Follow us

Contact Us