Initialize popup with disabled ok button, then enable based on user action

Page layout & navigation
1

I’m initializing my popup like so

var newrequest = $('#newrequestform').mobiscroll().popup({
          display: 'top',
          scrollLock: false,
          buttons: ['ok','cancel'],
          okText: 'Save',
          onSet: function (event, inst) {saveRequest()}
      }).mobiscroll('getInst');

Now how do I initialize this popup with the Ok button disabled, and then enable it when the user selects an option?

2

Hi Vincent,
Could you share some more information about this?
Is there another component inside the popup or what are those options the user is selecting?

3

Hi Gabi.

Thanks for the reply. In my popup there will be a calendar for the user to select a date. I don’t want them to be able to click “Save” until they’ve selected at least one date.

How do I do that?

4

Thank you for the details, Vincent!
You can do that with a custom button:

buttons: [{
        text: 'Save',
        cssClass: 'mbsc-fr-btn save-btn',
        handler: 'set'
    },
    'cancel'
]

Add your disabled styling to the button, for example:

.save-btn {
    opacity: .3;
    pointer-events: none;
}

And inside the calendar’s onSet event you can remove the disabled class from the button:

onSet: function (event, inst) {
    $('.save-btn').removeClass('save-btn');
}

Also just an observation: if you only have the calendar inside your popup, you can achieve that with a simple calendar with bubble styling, without the popup.

Please let me know if this helps you!

5

Thank you Gabi. And thanks for the tip about the bubble style, but I also have another field on the same popup so I don’t think that will work for me.