CODEWITHSUNDEEP
javascriptjquerybinddocument-ready
Shimmy Weitzhandler
Shimmy Weitzhandler

Reputation: 104702

Bind visibility of element to another element?

I want to have an element visible only if another element's value is not empty.

Right now I'm doing this using:

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

Is there a way to combine the two latter functions to one (so that the change even runs on startup as well?)

Upvotes: 0

Views: 231

Answers (1)

Arun P Johny
Arun P Johny

Reputation: 388316

You can trigger the change event on page load in order to trigger the handler

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

Upvotes: 3

Related Questions