對應復選框被選中的必填輸入欄位-有解無憂

我正在制作一個表格，我從一組復選框中只選擇一個復選框。我想讓輸入欄位成為必填欄位，其相應的復選框已被選中。

在這里，我只能選擇一個復選框并將其對應的文本欄位設為必填。我希望如果我選擇第 n 個復選框，則必須填寫第 n 個輸入欄位。

$(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 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>

uj5u.com熱心網友回復：

DOM 遍歷通常比操作名稱更簡單。在這里，我們可以找到同一行中的第一個文本輸入。

$(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 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>

uj5u.com熱心網友回復：

類似于 isherwood 的答案 -我粘貼時的代碼幾乎與他相同，但他更快。

但是，我會做一些不同的事情：當您第一次檢測到單擊復選框時，取消選中所有其他復選框（使復選框像單選按鈕一樣作業）并偽造required相關輸入欄位的所有屬性 - 這允許用戶改變主意并選擇不同的復選框。

如果你給每個“關聯輸入欄位”一個特殊的類，比如 .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

uj5u.com熱心網友回復：

這比為了說明我的觀點而嚴格需要的內容略顯冗長

您有重復的無效 ID 屬性id="OVD"
我添加了一些類來幫助說明范圍內的輸入組的目的以及與之關聯的“目標”，以根據您的請求設定為“必需”。我添加了 bootstrap 只是為了獲得稍微少一點噪音的視覺效果，因為你似乎正在使用它。
您可能會有多個“組”，所以在這里我也創建了一個“奶酪”組
我使用了一些資料屬性作為切換和過濾
我添加了“綠色”背景以將活動組顯示為指示器，以便您可以看到“OVD”和“奶酪”的作業
我添加了一個視覺元素只是為了顯示我們最后點擊的內容

$(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 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>

轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/493539.html

標籤：html jQuery

上一篇：為什么onFocus和onBlur在我的React應用程式中不起作用

下一篇：對應復選框被選中的必填輸入欄位