Moshiur Rahman Moshiur Rahman - 1 month ago 15
jQuery Question

Can't find out radiobutton click events in jquery

I am working with 2+2 radiobutton in my application. when i click any radio button it will affect on some input fields. But i am confused about to using click event with jquery.i already searched on stack overflow .there are so many suggestion and i'm confused after seeing so many suggestion.i tried some of them but not worked .
This is my HTML Code

<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


And i tried this jquery code :

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


This is the snippet:



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

You should change id to class (id is unique) and capture the event to get the target. See snippet: Hope it helps. Regards

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