Set button disabled with JavaScript?
January 23, 2018 12:00 AM
Is there a way to have a button initially disabled with JavaScript rather than using the onShow -undefined disabled?
I want to set a group of buttons disabled with an onClick and thought I might be able to use JavaScript to get the elements by class name, grab the "btn" id, then changed disabled to "true" or "". However, every machination I've tried is not having any affect, so it seems that Lectora is overriding my script as I've tried adding the script as an onShow and onClick to no avail. I know the value is on the btn ID, as I can see it when I look at the element through the console in Firefox developer.
I've tried setting the "btn" name to a variable, then ".setAttribute('disabled',"true")", ".removeAttribute('disabled')" and variable.disabled = "true".
Any other thoughts? I've moved the actions around (including at page show, regular show, and onClick) and added a delay.
For some context, I want to set a group of buttons disabled first, then conditionally set one or more of them as enabled based on certain conditions. I was hoping this would make it a ton easier than adding an action group with a set state for every single button.
Discussion (9)
Update - I can get this to work on a custom div within the onmousedown function, so I wonder if my first hunch is right, in that I can't override Lectora's onmousedown and would have to create a completely custom div to accomplish this.
@JasonADal - you seem to be obsessed by making things much harder and more complex than it needs to be. Just use the built in functionality where it can do what you need. Either by setting the button(s) to be 'Initially disabled' in the button properties or by using the on show function as you describe.
Lectoras native "Set state" action can be used in jQuery:
$(undefinedQuick thoughts... you can offcourse add some ActionGroup in Lectora and call that one with Javascript... so say you have a group in Lectora called og156489 with in it whatever actions...eg. to disable some buttons. So you can call that group from the external Javascript using: runGroup_og156489();//runs a group/actiongroup in Lectora that shows the newQuestion group..
Ofcourse this is not exactly what you want... you want to directly set some button.
Checked some of my Javascripts, and although i found solutions... from completely creating buttons from images to using an element to block buttons ( so you cannot click it ) but not anything directly disabling a button.
Gonna do some tests to find out if its possible.
@mnotermans5114 - Thanks for taking the time to look at your library. I really think it's unachievable without a series of Custom Divs for the buttons, where I have full control over the onmousedown command.
@mallow76 - I will happily admit to sometimes "making things harder". I'm trying to expand my repertoire and following the status quo, it's less likely that I'll learn and grow as a developer.
The other piece of it is that these modules are all software simulations, so some functionality, by it's nature, is highly complex. In this case, it's not simply a matter of the initial button state. Each button disables another group of buttons - a total of ten. As I said, I could create an action group that disables/enables that's run with an onClick. However, I thought I'd try a JavaScript that disables/enables all the buttons with a specific class with one command.
Tim, you have come through for me yet again - I need to get on the jquery bandwagon, since that "each" seems to save a TON of coding (translation - creating loops in the JavaScript). This sets up having one action in an action group instead of the 12 to set all of them enabled/disabled.
It looks like I could also use this for visibility but at the same time, in research noticed that there may be other more efficient ways to change certain attributes.
Thanks again!
Sorry to resurrect an old thread. Can you please help me on this? I would like to apply the JQuery/JavaScript on two buttons only based on some logic similar to @jasonadal .
Button343385
Button340194
However, I just don't seem to be calling the code below properly.
$(".your_class").each(function(){
window[$(this).attr("id")].setDisabled(true);
});
Figured it out...
button40.setState('disabledState');
where button40 is the HTML NAME of your button in Lectora.