當兩個復選框都被選中時，需要輸入部分

Question

因此，當單獨單擊時，我有兩個復選框，將使底部部分成為必需的 - 當兩者都被選中時，如何才能使最后一部分成為必需的？ 我似乎無法弄清楚如何做到這一點。

概述：
當兩個復選標記都被選中時，將“我確認...”部分設為紅色（必需）。

#rtd3Transaction是“我的交易數據”。
.rtdConfirm是上一節的類。

代碼：

/* Make checkbox textboxes not required unless checked */
$(document).ready(function() {
    $('#rtd3Transaction').change(function() {
        if ($('.rtdConfirm').attr('required')) {
            $('.rtdConfirm').removeAttr('required');
        }
        else {
            $('.rtdConfirm').attr('required','required');
        }
    });
});

$(document).ready(function() {
    $('#rtd3Device').change(function() {
        if ($('.rtdConfirm').attr('required')) {
            $('.rtdConfirm').removeAttr('required');
        }
        else {
            $('.rtdConfirm').attr('required','required');
        }
    });
});

Answer 1

大聲笑，我不是說只使用一個$(document).ready()函數嗎？

無論如何，只需將兩個條件組合成第三個change函數。

/* Make checkbox textboxes not required unless checked */
$(document).ready(function() {
    $('#rtd3Transaction').change(function() {
        if ($('.rtdConfirm').attr('required')) {
            $('.rtdConfirm').removeAttr('required');
        }
        else {
            $('.rtdConfirm').attr('required','required');
        }
    });

    $('#rtd3Device').change(function() {
        if ($('.rtdConfirm').attr('required')) {
            $('.rtdConfirm').removeAttr('required');
        }
        else {
            $('.rtdConfirm').attr('required','required');
        }
    });

    $('#rtd3Transaction, #rtd3Device').change(function() {
        if ($('#rtd3Transaction').checked && $('#rtd3Transaction').checked) {
            $('.rtdConfirm').attr('required','required');
        }
        else {
            $('.rtdConfirm').removeAttr('required');
        }
    });
});

如果這不起作用，請發布您的其余代碼，我會看看我能做些什么。

Answer 2

在 JS 中，您可以在包含復選框的父級上使用onchange事件，希望是一個表單，並檢查是否兩個復選框都被checked ，如果他們將第三個復選框設置為required

const rtd3Transaction = document.querySelector('#rtd3Transaction');
const rtd3Device = document.querySelector('#rtd3Device');
const rtdConfirm = document.querySelector('#rtdConfirm');

document.querySelector('form').addEventListener('change', ()=> {
  if(rtd3Transaction.checked && rtd3Device.checked) {
    rtdConfirm.required = true;
  }
})

Answer 3

我看到你在使用 jQuery，所以這里有一個基於 jQuery 的解決方案。

首先，您可以為兩個輸入組合更改事件處理程序。

其次，您可以使用.prop("checked")來查找復選框的選中狀態。

最后，使用.prop("required", true/false )設置最后一個復選框的必需狀態。

以下是我的處理方式：

$(document).ready(function()
{
    $("#rtd3Transaction, #rtd3Device").change(function()
    {
        var required = $("#rtd3Transaction").prop("checked") && $("#rtd3Device").prop("checked");
        $(".rtdConfirm").prop("required", required);
    });
});