将需要检查相应的复选框所需的输入字段

Question

我正在制作一种表格，其中我只从复选框组中选择一个复选框。 我想检查所需的输入字段，该字段已检查相应的复选框。

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <input type="checkbox" id="OVD" name="OVD" class="check" required>
    <h5>A. Passport Number</h5>
    <input type="text"><br>
    <input type="checkbox" id="OVD" name="OVD" class="check" required>
    <h5>B. Voter ID Card</h5>
    <input type="text"><br>
    <input type="checkbox" id="OVD" name="OVD" class="check" required>
    <h5>C. Driving Licence</h5>
    <input type="text"><br>
    <input type="checkbox" id="OVD" name="OVD" class="check" required>
    <h5>D. NREGA Job Card</h5>
    <input type="text"><br>
    <input type="checkbox" id="OVD" name="OVD" class="check" required>
    <h5 class="d-inline">E. National Population Register Letter</h5>
    <input type="text"><br>
    <input type="checkbox" id="OVD" name="OVD" class="check" required>
    <h5 class="d-inline">F. Proof of Possession on Aadhaar</h5>
    <input type="text">

在这里，我只能选择一个复选框，然后进行相应的文本字段。 我想要如果选择第n个复选框，则必须填写第n个输入字段。

Answer 1

您需要将输入链接到相应的Checkboox。将相应的控件分组为div。这使查询相关输入变得更加容易。

例如：

$(document).ready(function() {
    $('.check').click(function() {
        let name = $(this).attr("name")
        let text = $(this).siblings('input[type=text]').first()

        if ($(this).prop('checked')) {
            $('.check[name="' + name + '"]').prop('required', true)
            text.prop('required', true)
        } else {
            $('.check[name="' + name + '"]').prop('required', false)
            text.prop('required', false)
        }
        
        $('.check[name="' + name + '"]').not(this).prop('checked', false)
        $('.text').not(text).prop('required', false)
    });
});

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

    <input type="checkbox" id="OVD" name="OVD" class="check" required>

    <div>
        <h5>A. Passport Number</h5>
        <input type="text" class="text"><br>
        <input type="checkbox" id="OVD" name="OVD" class="check" required>
    </div>

    <div>
        <h5>B. Voter ID Card</h5>
        <input type="text" class="text"><br>
        <input type="checkbox" id="OVD" name="OVD" class="check" required>
    </div>

    <div>
        <h5>C. Driving Licence</h5>
        <input type="text" class="text"><br>
        <input type="checkbox" id="OVD" name="OVD" class="check" required>
    </div>

    <div>
        <h5>D. NREGA Job Card</h5>
        <input type="text" class="text"><br>
        <input type="checkbox" id="OVD" name="OVD" class="check" required>
    </div>

    <div>
        <h5 class="d-inline">E. National Population Register Letter</h5>
        <input type="text" class="text"><br>
        <input type="checkbox" id="OVD" name="OVD" class="check" required>
    </div>

    <div>
        <h5 class="d-inline">F. Proof of Possession on Aadhaar</h5>
        <input type="text">
    </div>