input field required whose correspond checkbox is checked-CodePudding

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/[email protected]/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 >
  <div >
    <input type="checkbox" id="OVD" name="OVD"  required>
    <h5 >A. Passport Number</h5>
  </div>
  <div >
    <input type="text" >
  </div>
</div>
<div >
  <div >
    <input type="checkbox" id="OVD" name="OVD"  required>
    <h5 >B. Voter ID Card</h5>
  </div>
  <div >
    <input type="text" >
  </div>
</div>
<div >
  <div >
    <input type="checkbox" id="OVD" name="OVD"  required>
    <h5 >C. Driving Licence</h5>
  </div>
  <div >
    <input type="text" >
  </div>
</div>
<div >
  <div >
    <input type="checkbox" id="OVD" name="OVD"  required>
    <h5 >D. NREGA Job Card</h5>
  </div>
  <div >
    <input type="text" >
  </div>
</div>
<div >
  <div >
    <input type="checkbox" id="OVD" name="OVD"  required>
    <h5 >E. National Population Register Letter</h5>
  </div>
  <div >
    <input type="text" >
  </div>
</div>
<div >
  <div >
    <input type="checkbox" id="OVD" name="OVD"  required>
    <h5 >F. Proof of Possession on Aadhaar</h5>
  </div>
  <div >
    <input type="text" >
  </div>
</div>

CodePudding user response：

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/[email protected]/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 >
  <div >
    <input type="checkbox" id="OVD" name="OVD"  required>
    <h5 >A. Passport Number</h5>
  </div>
  <div >
    <input type="text" >
  </div>
</div>
<div >
  <div >
    <input type="checkbox" id="OVD" name="OVD"  required>
    <h5 >B. Voter ID Card</h5>
  </div>
  <div >
    <input type="text" >
  </div>
</div>
<div >
  <div >
    <input type="checkbox" id="OVD" name="OVD"  required>
    <h5 >C. Driving Licence</h5>
  </div>
  <div >
    <input type="text" >
  </div>
</div>
<div >
  <div >
    <input type="checkbox" id="OVD" name="OVD"  required>
    <h5 >D. NREGA Job Card</h5>
  </div>
  <div >
    <input type="text" >
  </div>
</div>
<div >
  <div >
    <input type="checkbox" id="OVD" name="OVD"  required>
    <h5 >E. National Population Register Letter</h5>
  </div>
  <div >
    <input type="text" >
  </div>
</div>
<div >
  <div >
    <input type="checkbox" id="OVD" name="OVD"  required>
    <h5 >F. Proof of Possession on Aadhaar</h5>
  </div>
  <div >
    <input type="text" >
  </div>
</div>

CodePudding user response：

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

CodePudding user response：

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;
      });
    targetsInScope.find('.target-input').prop('required', false);
    //remove the background - just for an indicator on all of them
    targetsInScope.each(function() {
      this.dataset.activeBlock = "";
    });
    const isChecked = this.checked;

    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/[email protected]/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/[email protected]/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u LWgxfKTRIcfu0JTxR EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>

<div >
  <div >
    <input type="checkbox" data-target-name="OVD"  required>
    <h5 >A. Passport Number</h5>
  </div>
  <div >
    <input type="text" >
  </div>
</div>
<div >
  <div >
    <input type="checkbox" data-target-name="OVD"  required>
    <h5 >B. Voter ID Card</h5>
  </div>
  <div >
    <input type="text" >
  </div>
</div>
<div >
  <div >
    <input type="checkbox" data-target-name="OVD"  required>
    <h5 >C. Driving Licence</h5>
  </div>
  <div >
    <input type="text" >
  </div>
</div>
<div >
  <div >
    <input type="checkbox" data-target-name="OVD"  required>
    <h5 >D. NREGA Job Card</h5>
  </div>
  <div >
    <input type="text" >
  </div>
</div>
<div >
  <div >
    <input type="checkbox" data-target-name="OVD"  required>
    <h5 >E. National Population Register Letter</h5>
  </div>
  <div >
    <input type="text" >
  </div>
</div>
<div >
  <div >
    <input type="checkbox" data-target-name="OVD"  required>
    <h5 >F. Proof of Possession on Aadhaar</h5>
  </div>
  <div >
    <input type="text" >
  </div>
</div>
<div >
  <div >
    <input type="checkbox" data-target-name="cheese"  required>
    <h5 >Swiss</h5>
  </div>
  <div >
    <input type="text" >
  </div>
</div>
<div >
  <div >
    <input type="checkbox" data-target-name="cheese"  required>
    <h5 >Chedder</h5>
  </div>
  <div >
    <input type="text" >
  </div>
</div>
<div ></div>