我们可以为name属性提供所需的功能

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

</div>

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>

</div>