input field required whose correspond checkbox is checked

Question

I am making a form where I am selecting only one checkbox from group of checkbox. I want to make input field required whose corresponding checkbox are checked.

Here I can only select one checkbox and make its corresponding text field required. I want if I select nth checkbox then nth input field will mandatory to be filled.

$(document).ready(function() {
  $('.check').click(function() {
    let name = $(this).attr("name")
    if ($(this).prop('checked')) {
      $('.check[name="' + name + '"]').prop('required', false)
    } else {
      $('.check[name="' + name + '"]').prop('required', true)
    }
    $('.check[name="' + name + '"]').not(this).prop('checked', false)
  });
});

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="row">
  <div class="border border-dark col-lg-7 ps-4">
    <input type="checkbox" id="OVD" name="OVD" class="check form-check-input" required>
    <h5 class="d-inline">A. Passport Number</h5>
  </div>
  <div class="border border-dark col-lg-5">
    <input type="text" class="form-control border-0">
  </div>
</div>
<div class="row">
  <div class="border border-dark col-lg-7 ps-4">
    <input type="checkbox" id="OVD" name="OVD" class="check form-check-input" required>
    <h5 class="d-inline">B. Voter ID Card</h5>
  </div>
  <div class="border border-dark col-lg-5">
    <input type="text" class="form-control border-0">
  </div>
</div>
<div class="row">
  <div class="border border-dark col-lg-7 ps-4">
    <input type="checkbox" id="OVD" name="OVD" class="check form-check-input" required>
    <h5 class="d-inline">C. Driving Licence</h5>
  </div>
  <div class="border border-dark col-lg-5">
    <input type="text" class="form-control border-0">
  </div>
</div>
<div class="row">
  <div class="border border-dark col-lg-7 ps-4">
    <input type="checkbox" id="OVD" name="OVD" class="check form-check-input" required>
    <h5 class="d-inline">D. NREGA Job Card</h5>
  </div>
  <div class="border border-dark col-lg-5">
    <input type="text" class="form-control border-0">
  </div>
</div>
<div class="row">
  <div class="border border-dark col-lg-7 ps-4">
    <input type="checkbox" id="OVD" name="OVD" class="check form-check-input" required>
    <h5 class="d-inline">E. National Population Register Letter</h5>
  </div>
  <div class="border border-dark col-lg-5">
    <input type="text" class="form-control border-0">
  </div>
</div>
<div class="row">
  <div class="border border-dark col-lg-7 ps-4">
    <input type="checkbox" id="OVD" name="OVD" class="check form-check-input" required>
    <h5 class="d-inline">F. Proof of Possession on Aadhaar</h5>
  </div>
  <div class="border border-dark col-lg-5">
    <input type="text" class="form-control border-0">
  </div>
</div>

Answer 1

This is slightly more verbose than strictly needed just to illustrate my points

• You have duplicate ID attributes which is invalid id="OVD"
• I added some classes to help illustrate things a bit by purpose for the input group in scope and the "target" associated with that to set as the "required" given your request. I added bootstrap in just for a visual that is slightly less noisy since you appeared to be using that.
• You will likely have more than one "group" so here I create a "cheese" group also
• I used some data attributes to act as a toggle and to filter
• I added a "green" background to show the active group as an indicator so you can see both the "OVD" and "cheese" work
• I added a visual element just to show what we last clicked

$(function() {
  $('.check').on('click', function() {
    const name = $(this).data("targetName");
    // set all to not required
    const targets = $('.input-block');
    const targetsInScope = targets
      .filter(function() {
        return $(this).has('.check[data-target-name="' + name + '"]').length == 1;
      });
    const isChecked = this.checked;
    this.required = isChecked;
    // set all to not required if this one is checked, otherwise make them all required
    targetsInScope.find('.target-input').prop('required', isChecked);
    targetsInScope.find('.check.form-check-input').prop('required', isChecked);
    //remove the background - just for an indicator on all of them
    targetsInScope.each(function() {
      this.dataset.activeBlock = "";
    });

    targetsInScope.find('.check[data-target-name="' + name + '"]')
      .not(this).prop('checked', false);
    const block = $(this).closest('.input-block');
    // just to show what we have in scope
    $('.currently-active')
      .text(name + ":" + isChecked + ":" + block.find('.d-inline').text());
    block.find('.target-input').prop('required', isChecked);
    block.get(0).dataset.activeBlock = isChecked ? "active" : "";
  });
});

.input-block[data-active-block="active"] {
  background-color: #ddffdd;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>

<div class="row input-block">
  <div class="border border-dark col-lg-7 ps-4">
    <input type="checkbox" data-target-name="OVD" class="check form-check-input" required>
    <h5 class="d-inline">A. Passport Number</h5>
  </div>
  <div class="border border-dark col-lg-5">
    <input type="text" class="target-input form-control border-0">
  </div>
</div>
<div class="row input-block">
  <div class="border border-dark col-lg-7 ps-4">
    <input type="checkbox" data-target-name="OVD" class="check form-check-input" required>
    <h5 class="d-inline">B. Voter ID Card</h5>
  </div>
  <div class="border border-dark col-lg-5">
    <input type="text" class="target-input form-control border-0">
  </div>
</div>
<div class="row input-block">
  <div class="border border-dark col-lg-7 ps-4">
    <input type="checkbox" data-target-name="OVD" class="check form-check-input" required>
    <h5 class="d-inline">C. Driving Licence</h5>
  </div>
  <div class="border border-dark col-lg-5">
    <input type="text" class="target-input form-control border-0">
  </div>
</div>
<div class="row input-block">
  <div class="border border-dark col-lg-7 ps-4">
    <input type="checkbox" data-target-name="OVD" class="check form-check-input" required>
    <h5 class="d-inline">D. NREGA Job Card</h5>
  </div>
  <div class="border border-dark col-lg-5">
    <input type="text" class="target-input form-control border-0">
  </div>
</div>
<div class="row input-block">
  <div class="border border-dark col-lg-7 ps-4">
    <input type="checkbox" data-target-name="OVD" class="check form-check-input" required>
    <h5 class="d-inline">E. National Population Register Letter</h5>
  </div>
  <div class="border border-dark col-lg-5">
    <input type="text" class="target-input form-control border-0">
  </div>
</div>
<div class="row input-block">
  <div class="border border-dark col-lg-7 ps-4">
    <input type="checkbox" data-target-name="OVD" class="check form-check-input" required>
    <h5 class="d-inline">F. Proof of Possession on Aadhaar</h5>
  </div>
  <div class="border border-dark col-lg-5">
    <input type="text" class="target-input form-control border-0">
  </div>
</div>
<div class="row input-block">
  <div class="border border-dark col-lg-7 ps-4">
    <input type="checkbox" data-target-name="cheese" class="check form-check-input" required>
    <h5 class="d-inline">Swiss</h5>
  </div>
  <div class="border border-dark col-lg-5">
    <input type="text" class="target-input form-control border-0">
  </div>
</div>
<div class="row input-block">
  <div class="border border-dark col-lg-7 ps-4">
    <input type="checkbox" data-target-name="cheese" class="check form-check-input" required>
    <h5 class="d-inline">Chedder</h5>
  </div>
  <div class="border border-dark col-lg-5">
    <input type="text" class="target-input form-control border-0">
  </div>
</div>
<div class="currently-active"></div>

Answer 2

Similar to isherwood's answer - I had nearly the same code he did when I came to paste it in, but he was faster.

However, I would do a couple of things differently: when you first detect the click on the checkbox, uncheck all the other checkboxes (that makes the checkboxes work like radio buttons) and also falsify all the required attributes for the associated input fields - that allows the user to change their mind and select a different checkbox.

This task will be a little simpler to code if you give each of the "associated input fields" a special class, like .chkAssoc

$(document).ready(function() {
    $('.check').click(function() {
        //uncheck all checkboxes, then re-check only this one
        $('.check').each(function(){
            $(this).prop('checked') = false;
        });
        $(this).prop('checked') = true;

        //reset all associated inputs to Not Required
        $('.chkAssoc').each(function(){
            $(this).prop('required', false);
        });
        //set the correct associated input as required
        if ($(this).prop('checked')) {
            const assocInput = $(this).closest('div.row').find('input[type=text]');
            assocInput.prop('required', true);
        }
    });
}); //end document.ready

Answer 3

DOM traversal is often simpler than manipulating names. Here we can just find the first text input in the same row.

$(document).ready(function() {
  $('.check').click(function() {
    const textInput = $(this).closest('.row').find('input[type="text"]').first()

    if ($(this).prop('checked')) {
      textInput.prop('required', false)
    } else {
      textInput.prop('required', true)
    }

    $('.check[name="' + name + '"]').not(this).prop('checked', false)
  });
});

[type="text"][required] {
  background: pink !important;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="row">
  <div class="border border-dark col-lg-7 ps-4">
    <input type="checkbox" id="OVD" name="OVD" class="check form-check-input" required>
    <h5 class="d-inline">A. Passport Number</h5>
  </div>
  <div class="border border-dark col-lg-5">
    <input type="text" class="form-control border-0">
  </div>
</div>
<div class="row">
  <div class="border border-dark col-lg-7 ps-4">
    <input type="checkbox" id="OVD" name="OVD" class="check form-check-input" required>
    <h5 class="d-inline">B. Voter ID Card</h5>
  </div>
  <div class="border border-dark col-lg-5">
    <input type="text" class="form-control border-0">
  </div>
</div>
<div class="row">
  <div class="border border-dark col-lg-7 ps-4">
    <input type="checkbox" id="OVD" name="OVD" class="check form-check-input" required>
    <h5 class="d-inline">C. Driving Licence</h5>
  </div>
  <div class="border border-dark col-lg-5">
    <input type="text" class="form-control border-0">
  </div>
</div>
<div class="row">
  <div class="border border-dark col-lg-7 ps-4">
    <input type="checkbox" id="OVD" name="OVD" class="check form-check-input" required>
    <h5 class="d-inline">D. NREGA Job Card</h5>
  </div>
  <div class="border border-dark col-lg-5">
    <input type="text" class="form-control border-0">
  </div>
</div>
<div class="row">
  <div class="border border-dark col-lg-7 ps-4">
    <input type="checkbox" id="OVD" name="OVD" class="check form-check-input" required>
    <h5 class="d-inline">E. National Population Register Letter</h5>
  </div>
  <div class="border border-dark col-lg-5">
    <input type="text" class="form-control border-0">
  </div>
</div>
<div class="row">
  <div class="border border-dark col-lg-7 ps-4">
    <input type="checkbox" id="OVD" name="OVD" class="check form-check-input" required>
    <h5 class="d-inline">F. Proof of Possession on Aadhaar</h5>
  </div>
  <div class="border border-dark col-lg-5">
    <input type="text" class="form-control border-0">
  </div>
</div>