jquery - 无法在jquery中找到单选按钮点击事件

Question

我正在我的应用程序中使用 2+2 单选按钮。当我单击任何单选按钮时，它会影响某些输入字段。但我对使用 jquery 的点击事件感到困惑。我已经在堆栈溢出上进行了搜索。有很多建议，在看到这么多建议后我很困惑。我尝试了其中一些但没有成功。这是我的 HTML 代码

<input type="radio" id="voucher" name="voucher" value="1"
        checked="checked">Payment Voucher <input type="radio"
        name="voucher" id="voucher" value="2">Receive Voucher

     <input type="radio" name="transaction" id="transaction"
                                        value="1" checked="checked">Cash <input type="radio" name="transaction" id="transaction" value="2">Bank

我尝试了这个 jquery 代码:

$("input").on( "click", function() {
    if ($("input:radio[name=voucher]").is(":checked")) {
        check = $('input:radio[name=voucher]:checked').val();
        alert(check);
        if (check == 1) {

            $("#credit").prop("disabled", true);
            $("#debit").prop("disabled", false);
        } else if (check == 2) {

            $("#debit").prop("disabled", true);
            $("#credit").prop("disabled", false);
        }
    }
});

$("#transaction").click(function(event) {
    if ($("input:radio[name=transaction]").is(":checked")) {
        checktransaction = $('input[name=transaction]:checked').val();

        if (checktransaction == 1) {

            $("#bankacc").prop("disabled", true);
            $("#chequeno").prop("disabled", true);
            $("#cashinhand").prop("disabled", false);
        }

        if (checktransaction == 2) {

            $("#cashinhand").prop("disabled", true);
            $("#bankacc").prop("disabled", false);
            $("#chequeno").prop("disabled", false);
        }
    }
});

这是片段:

    $("input").on( "click", function() {
        if ($("input:radio[name=voucher]").is(":checked")) {
            check = $('input:radio[name=voucher]:checked').val();
            alert(check);
            if (check == 1) {

                $("#credit").prop("disabled", true);
                $("#debit").prop("disabled", false);
            } else if (check == 2) {

                $("#debit").prop("disabled", true);
                $("#credit").prop("disabled", false);
            }
        }
    });

    $("#transaction").click(function(event) {
        if ($("input:radio[name=transaction]").is(":checked")) {
            checktransaction = $('input[name=transaction]:checked').val();

            if (checktransaction == 1) {

                $("#bankacc").prop("disabled", true);
                $("#chequeno").prop("disabled", true);
                $("#cashinhand").prop("disabled", false);
            }

            if (checktransaction == 2) {

                $("#cashinhand").prop("disabled", true);
                $("#bankacc").prop("disabled", false);
                $("#chequeno").prop("disabled", false);
            }
        }
    });

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<input type="radio" id="voucher" name="voucher" value="1"
    	checked="checked">Payment Voucher <input type="radio"
    	name="voucher" id="voucher" value="2">Receive Voucher
                      
     <input type="radio" name="transaction" id="transaction"
    									value="1" checked="checked">Cash <input type="radio" name="transaction" id="transaction" value="2">Bank

Answer 1

您应该将 id 更改为 class(id 是唯一的)并捕获事件以获取目标。参见片段:希望能帮助到你。问候

$(".voucher").on( "click", function(event) {
          var target = $( event.target );
        if (target.is(":checked")) {
            check = target.val();
            alert(check);
            if (check == 1) {

                $("#credit").prop("disabled", true);
                $("#debit").prop("disabled", false);
            } else if (check == 2) {

                $("#debit").prop("disabled", true);
                $("#credit").prop("disabled", false);
            }
        }
    });

    $(".transaction").click(function(event) {
     var target = $( event.target );
        if (target.is(":checked")) {
            checktransaction = target.val();
            alert(checktransaction);
            if (checktransaction == 1) {

                $("#bankacc").prop("disabled", true);
                $("#chequeno").prop("disabled", true);
                $("#cashinhand").prop("disabled", false);
            }

            if (checktransaction == 2) {

                $("#cashinhand").prop("disabled", true);
                $("#bankacc").prop("disabled", false);
                $("#chequeno").prop("disabled", false);
            }
        }
    });

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<input type="radio" class="voucher" name="voucher" value="1"
    	checked="checked">Payment Voucher <input type="radio"
    	name="voucher" class="voucher" value="2">Receive Voucher
                      
     <input type="radio" name="transaction" class="transaction"
    									value="1" checked="checked">Cash <input type="radio" name="transaction" class="transaction" value="2">Bank