0

我有以下JS函数：

const bindSwitches = function() {
  $(document).on("click", ".lever", function() {
    var checkbox = $(this).siblings("input[type=checkbox]");
    var hiddenField = $(this).siblings("input[type=hidden]");
    
    if (checkbox.prop("checked") === true) {
      checkbox.prop("value", 0);
      hiddenField.prop("value", 0);
    } else if (checkbox.prop("checked") === false) {
      checkbox.prop("value", 1);
      hiddenField.prop("value", 1);
    }

    $(checkbox).trigger("change");
  });
};

它与 Materialize 库提供的开关组件交互。我刚刚添加了最后一行，因为每当触发复选框时都会发生一些行为。但是该更改事件永远不会触发。我的应用程序中也有这个功能：

const bindAllChecks = function() {
  $(document).on("change", ".select-all-check", function() {
    var checks = $(this).closest(".table, table").find(".multiple-check:visible");

    if (this.checked) {
      $.each( checks, function( index, checkbox ){
        if ($(checkbox).prop("checked") === false) {
          $(checkbox).prop("checked", true);
          $(checkbox).trigger("change");
        }
      });
    } else {
      $.each( checks, function( index, checkbox ){
        if ($(checkbox).prop("checked") === true) {
          $(checkbox).prop("checked", false);
          $(checkbox).trigger("change");
        }
      });
    }
  });
};

请注意我如何使用完全相同的$(checkbox).trigger("change"). 在此功能中，它可以完美运行。

我尝试更改绑定事件的顺序，以确保事先明确定义了更改事件。我已经确保该功能的其余部分被正确触发并且在这方面没有问题。我还尝试了替代语法的不同变体，但没有任何效果。

这是它应该触发的代码：

const bindCheckboxOverride = function() {
  $(document).on("change", ".checkbox-collection input[type=checkbox]:not(.select-all-check)", function() {
    var hiddenField = $(this).prev();

    if(hiddenField.attr("disabled") === "disabled") {
      hiddenField.removeAttr("disabled");
    } else  {
      hiddenField.attr("disabled", "disabled");
    }
  });
};
4

1 回答 1

0

对于我提出的问题，我仍然没有确切的解决方案，但我想出了另一种方法。我没有尝试触发更改，而是从更改中提取了我想要的功能，甚至是它自己的功能：

const bindCheckboxOverride = function() {
  $(document).on("change", ".checkbox-collection input[type=checkbox]:not(.select-all-check)", function() {
    handleCheckboxDisable(this);
  });
};

const handleCheckboxDisable = function(checkbox) {
  var hiddenField = $(checkbox).prev();

  if(hiddenField.attr("disabled") === "disabled") {
    hiddenField.removeAttr("disabled");
  } else  {
    hiddenField.attr("disabled", "disabled");
  }
};

所以现在我可以直接从我的另一个函数调用这个函数：

const bindSwitches = function() {
  $(document).on("click", ".lever", function() {
    var checkbox = $(this).siblings("input[type=checkbox]");
    var hiddenField = $(this).siblings("input[type=hidden]");
    
    if (checkbox.prop("checked") === true) {
      checkbox.prop("value", 0);
      hiddenField.prop("value", 0);
    } else if (checkbox.prop("checked") === false) {
      checkbox.prop("value", 1);
      hiddenField.prop("value", 1);
    }

    handleCheckboxDisable(checkbox);
  });
};

它没有回答这个问题，但我认为这可能对某人有帮助。如果有人有任何见解，仍然想知道为什么原始代码不起作用。

于 2020-07-09T12:11:48.817 回答