jQuery изменение триггера флажка не работает

Question

У меня есть следующая 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");
    }
  });
};

Answer 1

У меня до сих пор нет точного решения заданного мной вопроса, но я придумал альтернативный метод. Вместо того, чтобы пытаться изменить триггер, я вытащил функциональность, которую хочу от изменения, даже в его собственную функцию:

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);
  });
};

Это не отвечает на вопрос, но я подумал, что это может кому-то помочь. Хотел бы знать, почему исходный код не работает, если у кого-то есть какие-то идеи.