javascript - 将元素的可见性绑定(bind)到另一个元素？

Question

我想让一个元素仅在另一个元素的值不为空时才可见。

现在我正在使用以下方法执行此操作:

function setReceiveSmsNotificationsCheckboxArea() {
  var checkbox = $('#ReceiveSmsNotifications');
  var value = !!$('#Cellphone').val().trim(); //bool depending on txt val
  checkbox.prop('checked', value);
  checkbox.closest('.form-group').toggle(value);
}

$('#Cellphone').change(function () {
  setReceiveSmsNotificationsCheckboxArea();
});

$(document).ready(setReceiveSmsNotificationsCheckboxArea);

有没有办法将后两个功能合并为一个(以便更改甚至在启动时运行？)

Answer 1

您可以在页面加载时触发更改事件以触发处理程序

function setReceiveSmsNotificationsCheckboxArea() {
  var checkbox = $('#ReceiveSmsNotifications');
  var value = !!$('#Cellphone').val().trim(); //bool depending on txt val
  checkbox.prop('checked', value);
  checkbox.closest('.form-group').toggle(value);
}

$('#Cellphone').change(setReceiveSmsNotificationsCheckboxArea).change();