CODEWITHSUNDEEP
javascripthtmljquerycss
DotNet Coder
DotNet Coder

Reputation: 89

on my click event only one checkbox event working but other is not checking

I have a click event where I have multiple checkbox events. Unfortunately only the 1st checkbox event is checking. The rest of the checkbox events are not checking.

Any help would be highly appreciated.

$("#cascadeChange").click(function() {
  //alert("Clicked");

  var isChkIp = $("#chkboxIP").is(":checked");
  if (isChkIp) {
    $("#IINTier1Ip").val($("#txtCascadeTier1").val()).change();
    $("#IINTier2Ip").val($("#txtCascadeTier2").val()).change();
    $(".txtIpOon").val($("#txtCascadeOon").val()).change();
    $("#idCscade").modal('hide');
    return true;
  } else {
    return false;
  }

  var isChkOp = $("#chkboxOp").is(":checked");
  if (isChkOp) {
    $("#IINTier1Op").val($("#txtCascadeTier1").val()).change();
    $("#IINTier2Op").val($("#txtCascadeTier2").val()).change();
    $(".txtCascadeOonOp").val($("#txtCascadeOon").val()).change();
    $("#idCscade").modal('hide');
    return true;
  } else {
    return false;
  }

  var isChkOpEr = $("#chkboxOpEr").is(":checked");
  if (isChkOpEr) {
    $("#IINTier1OpEr").val($("#txtCascadeTier1").val()).change();
    $("#IINTier2OpEr").val($("#txtCascadeTier2").val()).change();
    $("#OONOpEr").val($("#txtCascadeOon").val()).change();
    return true;
  } else {
    return false;
  }

  return true
});

Upvotes: 1

Views: 52

Answers (1)

Rory McCrossan
Rory McCrossan

Reputation: 337560

Execution of the event handler function will end as soon as the first return statement is invoked. To fix the problem call preventDefault() on the event that's raised instead:

$("#cascadeChange").click(function(e) {
  var isChkIp = $("#chkboxIP").is(":checked");
  if (isChkIp) {
    $("#IINTier1Ip").val($("#txtCascadeTier1").val()).change();
    $("#IINTier2Ip").val($("#txtCascadeTier2").val()).change();
    $(".txtIpOon").val($("#txtCascadeOon").val()).change();
    $("#idCscade").modal('hide');
  } else {
    e.preventDefault();
  }

  var isChkOp = $("#chkboxOp").is(":checked");
  if (isChkOp) {
    $("#IINTier1Op").val($("#txtCascadeTier1").val()).change();
    $("#IINTier2Op").val($("#txtCascadeTier2").val()).change();
    $(".txtCascadeOonOp").val($("#txtCascadeOon").val()).change();
    $("#idCscade").modal('hide');
  } else {
    e.preventDefault();
  }

  var isChkOpEr = $("#chkboxOpEr").is(":checked");
  if (isChkOpEr) {
    $("#IINTier1OpEr").val($("#txtCascadeTier1").val()).change();
    $("#IINTier2OpEr").val($("#txtCascadeTier2").val()).change();
    $("#OONOpEr").val($("#txtCascadeOon").val()).change();
  } else {
    e.preventDefault();
  }
});

As an aside, be wary of raising that many events in the DOM programmatically - it's a code smell indicating a poor structure.

If you need to run code under those events, put it in a function within your code base and call it directly where required.

Upvotes: 1

Related Questions