How to prevent radiobutton loose "focus" when custom jQuery return false?-CodePudding

I have 3 radio buttons with same name (property). If "Deleted" radio is checked and someone will click "Active" i wish to run custom function which returns true or false. If it fails i want to prevent "Deleted" radio to be unchecked.

Problem is that the radiobutton looses "focus" and the "Active" radio is selected.

I've used code below to prevent this but it seems to be dirty workaround.

Is there better way to prevent "Deleted" radiobutton to be unchecked if custom function return false?

$("#radioActive").on("change", function() {
  if (!CustomFunction1()) {
    $("#radioUnactive").prop('checked', true);
    bootbox.alert('No Pain No Game');
  }
});

$("#radioUnactive").on("change", function() {
  if ($('#distributor').val() == '1') {
    $("#radioActive").prop('checked', true);
    bootbox.alert('NO NO NO')
  }
  if (CustomFunction2()) {
    $("#radioActive").prop('checked', true);
    bootbox.alert('Distributor has assigned users - cannot be disabled ');
  }
});

$("#radioDelete").on("change", function() {
  if ($('#distributor').val() == '1') {
    $("#radioActive").prop('checked', true);
    bootbox.alert('NO NO NO!');
  }
  if (CustomFunction2()) {
    $("#radioActive").prop('checked', true);
    bootbox.alert('No Way')
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootbox.js/5.5.2/bootbox.min.js" integrity="sha512-RdSPYh1WA6BF0RhpisYJVYkOyTzK4HwofJ3Q7ivt/jkpW6Vc8AurL1R 4AUcvn9IwEKAPm/fk7qFZW3OuiUDeg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<div >
  <input type="radio" id="radioActive" name="Buttons[activeState]" value="active">
  <label for="radioActive">Active</label>

  <input type="radio" id="radioUnactive" name="Buttons[activeState]" value="unactive">
  <label for="radioUnactive">Unactive</label>

  <input type="radio" id="radioDelete" name="Buttons[activeState]" value="deleted">
  <label for="radioDelete">Deleted</label>
</div>

CodePudding user response：

Instead of writing multiple codes, do it in one go.

A sample example is to first save the previous checked radio button id and then based on some checking inside a function and its return value make a new one checked or make the previous one checked only.

var prevCheckedId = '';

$('input[type=radio]').mouseup(function(){
    prevCheckedId = $('input[type=radio]:checked').attr('id');
}).change(function(){
    var value = $(this).val();
    if(CustomFunction1(value)) {
      $(this).prop('checked', true);
    }else{
      $(this).prop('checked', false);
      $('#' prevCheckedId).prop('checked', true);
    }
});

function CustomFunction1(value){
  if(value == 'active'){
    return false;
  }else{
    return true;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div >
    <input type="radio" id="radioActive" name="Buttons[activeState]" value="active">
    <label for="radioActive">Active</label>

    <input type="radio" id="radioUnactive" name="Buttons[activeState]" value="unactive">
    <label for="radioUnactive">Unactive</label>

    <input type="radio" id="radioDelete" name="Buttons[activeState]" value="deleted">
    <label for="radioDelete">Deleted</label> 
</div>