JSFiddle - React, Tailwind, and code Playground

by Mohd Zaki

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<form class="p-5">


  <div class="form-group">

    <label class="radio-inline">
      <input type="radio" name="warga" class="styled" value="1">
      Warganegara
    </label>

    <label class="radio-inline">
      <input type="radio" name="warga" class="styled" value="2">
      Bukan Warganegara
    </label>
  </div>

  <div class="col-md-3">
    <div class="form-group">
      <label>Name:</label>
      <input type="text" name="name" class="form-control" placeholder="Name" required>
    </div>
  </div>

  <div class="col-md-3">
    <div class="form-group">
      <label>NRIC:</label>
      <input type="text" name="nric" class="form-control" placeholder="NRIC" data-mask="999999-99-9999">
    </div>
  </div>

  <div class="col-md-3">
    <div class="form-group">
      <label>Passport No./Others:</label>
      <input type="text" name="no_others" class="form-control" placeholder="Passport/Others">
    </div>
  </div>

  <div class="col-md-4">
    <div class="form-group">
      <label>Date of Birth:</label>
      <div class="input-group">
        <span class="input-group-addon"><i class="icon-calendar5"></i></span>
        <input type="text" name="dob" class="form-control pickadate-limits" placeholder="Date of Birth" required>
      </div>
    </div>
  </div>

  <div class="col-md-2">
    <div class="form-group">
      <label class="display-block">Gender:</label>
      <label class="radio-inline">
        <input type="radio" name="gender" class="styled" value="Male" checked="checked">
        Male
      </label>

      <label class="radio-inline">
        <input type="radio" name="gender" class="styled" value="Female">
        Female
      </label>
    </div>
  </div>
  <button type="submit">
  Submit
  </button>
  </form>

JavaScript

$(document).ready(function(){
    $("input[type='radio'][name='warga']").on('click',function(){
        //$(this).attr("checked", false);
			var warga =	$(this).val();
      
      if(warga == 1){
      		
      	$("input[name='nric']").attr("required", true);
        $("input[name='no_others']").attr("required", false);

      }else{
      	$("input[name='nric']").attr("required", false);
        $("input[name='no_others']").attr("required", true);
      }
    });
    
    
});