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)
  });
});






  
    
    A. Passport Number
  
  
    
  


  
    
    B. Voter ID Card
  
  
    
  


  
    
    C. Driving Licence
  
  
    
  


  
    
    D. NREGA Job Card
  
  
    
  


  
    
    E. National Population Register Letter
  
  
    
  


  
    
    F. Proof of Possession on Aadhaar

user_1264804 · Answer

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;
}






  
    
    A. Passport Number
  
  
    
  


  
    
    B. Voter ID Card
  
  
    
  


  
    
    C. Driving Licence
  
  
    
  


  
    
    D. NREGA Job Card
  
  
    
  


  
    
    E. National Population Register Letter
  
  
    
  


  
    
    F. Proof of Possession on Aadhaar

user_1447509 · Answer

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

user_125981 · Answer

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;
}







  
    
    A. Passport Number
  
  
    
  


  
    
    B. Voter ID Card
  
  
    
  


  
    
    C. Driving Licence
  
  
    
  


  
    
    D. NREGA Job Card
  
  
    
  


  
    
    E. National Population Register Letter
  
  
    
  


  
    
    F. Proof of Possession on Aadhaar
  
  
    
  


  
    
    Swiss
  
  
    
  


  
    
    Chedder

input field required whose correspond checkbox is checked

3 Answers