can we give required function for name attribute

Question

Here I am having radio button and checkbox button and i want to give required function, so that i gave my code like this

<script>
    $( document ).ready(function() {
        
        $cbx_group = $("input:radio[name='occupation_status[]']");
        $cbx_group1 = $("input:checkbox[name='occupation_status[]']");
        
        if(($cbx_group.not(":checked"))&&($cbx_group1.not(":checked"))){

          document.getElementByName("occupation_status").required = true;
        } else{
        
           $cbx_group.prop('required', false);
           $cbx_group1.prop('required', false);
        }
     });
</script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
  <label for="inputEmail3" class="col-sm-4 control-label">Occupation status:</label>
  <div class="col-sm-8">
    <label class="radio-inline formui-radio option">
      <input type="radio"  name="occupation_status[]" id="occupation_status1" value="self">
      Self </label>
    <label class="radio-inline formui-radio option">
      <input type="radio" name="occupation_status[]" id="occupation_status2" value="employed">
      Employed </label>
       <span>
  <label class="checkbox-inline form-checkbox option" style=" width: 113px;">
    <input type="checkbox" name="occupation_status[]" id="occupation_status3" value="Night Shift"/>Night Shift
  </label>
  </span>
  <label class="radio-inline formui-radio option">
      <input type="radio" name="occupation_status[]" id="occupation_status4" value="Retired">
      Retired </label>
  </div>
</div>

when both the checkbox and the radio button is not checked it should show at least one to be checked and if any radio button or checkbox button is checked it should perform false condition

Answer 1

check this snippet:

$( document ).ready(function() {
    
    var radio_group = $('input[type="radio"][name="occupation_status[]"]');
    var cbx_group = $('input[type="checkbox"][name="occupation_status[]"]');
    
    changeRequiredStatus();
    
    $('[name="occupation_status[]"]').change(function(){
    		changeRequiredStatus();
    });
    
    function changeRequiredStatus(){
        if(!radio_group.is(":checked")&&!cbx_group.is(":checked")){
            $('[name="occupation_status[]"]').prop('required',true);
        }
        else{
            $('[name="occupation_status[]"]').prop('required',false);
        }
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
  <label for="inputEmail3" class="col-sm-4 control-label">Occupation status:</label>
  <div class="col-sm-8">
    <label class="radio-inline formui-radio option">
      <input type="radio"  name="occupation_status[]" id="occupation_status1" value="self">
      Self </label>
    <label class="radio-inline formui-radio option">
      <input type="radio" name="occupation_status[]" id="occupation_status2" value="employed">
      Employed </label>
       <span>
  <label class="checkbox-inline form-checkbox option" style=" width: 113px;">
    <input type="checkbox" name="occupation_status[]" id="occupation_status3" value="Night Shift"/>Night Shift
  </label>
  </span>
  <label class="radio-inline formui-radio option">
      <input type="radio" name="occupation_status[]" id="occupation_status4" value="Retired">
      Retired </label>
  </div>
</div>