Enable & disable switch using 2 Radio button using jquery-CodePudding

I have a switch that needs to be enabled & disable onclick of 2 separate radio buttons. onclick of disabling radiobutton the radiobutton should be disabled & onclick of enabling radiobutton should be enabled and vice-versa. I'm new to this field. Any help would be appreciated. Thanks in advance. Below is my code.

$(document).ready(function() {
  $('input[type="radio"]').click(function() {
    if ($('#toggleswitch').is(".toggledisabled")) return 
    var inputValue = $(this).attr("value");
    if (inputValue == "on") {
      $('#toggleswitch').addClass("toggleon");
      $('#toggleswitch').removeClass("toggleoff");
      $('#togBtn').prop('checked', false);
    }
    if (inputValue == "off") {
      $('#toggleswitch').addClass("toggleoff");
      $('#toggleswitch').removeClass("toggleon");
      $('#togBtn').prop('checked', true);
    }

  });

  $('.container').each(function() {
    $("[name=enable]").on("click", function(event) {
      $('#toggleswitch').toggleClass("toggledisabled",this.id==="inActive");
      $('#toggleswitch').find("span").toggleClass("tglabel_disable",this.id==="inActive");
      $(".switch").toggleClass("switchdisabled",this.id==="inActive")
    });
  });
});

.switch {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 20px;
  left: 140px;
}

.switch input {
  display: none;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: red;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 14px;
  width: 14px;
  left: 2px;
  bottom: 3px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked .slider {
  background-color: #4D535C;
}

input:focus .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked .slider:before {
  -webkit-transform: translateX(22px);
  -ms-transform: translateX(22px);
  transform: translateX(22px);
}

.off {
  display: none;
}

.on,
.off {
  color: red;
  position: absolute;
  transform: translate(-50%, -50%);
  top: 10px;
  left: 55px;
  font-size: 14px;
  font-weight: 600;
  line-height: 16px;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding-left: 3px;
}

.off {
  color: #4D535C;
  padding-left: 10px;
}

input:checked .slider .off {
  display: block;
}

input:checked .slider .on {
  display: none;
}

.slider.round {
  border-radius: 17px;
}

.slider.round:before {
  border-radius: 50%;
}

.toggleon {
  background-color: red;
}

.toggledisabled {
  background: #D3D3D3 !important;
}

.tglabel_disable {
  color: #D3D3D3 !important;
}
.switch.switchdisabled  { pointer-events: none;}
.toggledisabled>.tglabel_disable {
  display: none !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div >
  <label >
        <input type="checkbox" id="togBtn" >
        <div  id="toggleswitch">
            <span  id="text_on">ON</span>
            <span  id="text_off">OFF</span>
        </div>
    </label>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <div >
    <input type="radio" name="enable" value="active" id="active" />
    <label for="active"><span>Enabled</span></label>
    <input type="radio" name="enable" value="inactive" id="inActive" />
    <label for="inActive"><span>Disabled</span></label>
  </div>

  <br/>
  <br/>
  
</div>

CodePudding user response：

Call the two sets a different name
toggleClass instead
stop pointer events on the .switch container

$(document).ready(function() {
  $('input[type="radio"]').click(function() {
    if ($('#toggleswitch').is(".toggledisabled")) return 
    var inputValue = $(this).attr("value");
    if (inputValue == "on") {
      $('#toggleswitch').addClass("toggleon");
      $('#toggleswitch').removeClass("toggleoff");
      $('#togBtn').prop('checked', false);
    }
    if (inputValue == "off") {
      $('#toggleswitch').addClass("toggleoff");
      $('#toggleswitch').removeClass("toggleon");
      $('#togBtn').prop('checked', true);
    }

  });

  $('.container').each(function() {
    $("[name=enable]").on("click", function(event) {
      $('#toggleswitch').toggleClass("toggledisabled",this.id==="inActive");
      $('#toggleswitch').find("span").toggleClass("tglabel_disable",this.id==="inActive");
      $(".switch").toggleClass("switchdisabled",this.id==="inActive")
    });
  });
});

.switch {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 20px;
  left: 140px;
}

.switch input {
  display: none;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: red;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 14px;
  width: 14px;
  left: 2px;
  bottom: 3px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked .slider {
  background-color: #4D535C;
}

input:focus .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked .slider:before {
  -webkit-transform: translateX(22px);
  -ms-transform: translateX(22px);
  transform: translateX(22px);
}

.off {
  display: none;
}

.on,
.off {
  color: red;
  position: absolute;
  transform: translate(-50%, -50%);
  top: 10px;
  left: 55px;
  font-size: 14px;
  font-weight: 600;
  line-height: 16px;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding-left: 3px;
}

.off {
  color: #4D535C;
  padding-left: 10px;
}

input:checked .slider .off {
  display: block;
}

input:checked .slider .on {
  display: none;
}

.slider.round {
  border-radius: 17px;
}

.slider.round:before {
  border-radius: 50%;
}

.toggleon {
  background-color: red;
}

.toggledisabled {
  background: #D3D3D3 !important;
}

.tglabel_disable {
  color: #D3D3D3 !important;
}
.switch.switchdisabled  { pointer-events: none;}
.toggledisabled>.tglabel_disable {
  display: none !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div >
  <label >
        <input type="checkbox" id="togBtn" >
        <div  id="toggleswitch">
            <span  id="text_on">ON</span>
            <span  id="text_off">OFF</span>
        </div>
    </label>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <div >
    <input type="radio" name="enable" value="active" id="active" />
    <label for="active"><span>enabled</span></label>
    <input type="radio" name="enable" value="inactive" id="inActive" />
    <label for="inActive"><span>Disabled</span></label>
  </div>

  <br/>
  <br/>
  <div >
    <input type="radio" id="on" name="box" value="on" checked>
    <label for="on">On</label>
    <br />
    <input type="radio" id="off" name="box" value="off">
    <label for="off">Off</label>
  </div>
</div>