Disabling a text entry field

I attached the .story file. The JavaScript code is inside Execute JavaScript triggers. Use it however and whenever you need. In this .story, I show how to simply enable or disable the text entry field with one button based on its state. In reply to Griffin Davis. 

Thank you, Nadim! Works like a charm.

You should change selector querySelector('.acc-textinput') to querySelectorAll('.acc-textinput'). It selects all elements/inputs that match a specified CSS selector and returns a NodeList containing those elements. For example:

var inputs = document.querySelectorAll('.acc-textinput');
if (inputs.length > 0) {
    inputs[1].disabled = true;
    inputs[1].style.setProperty('color', '#BFBFBF', 'important');
}

It means that only the second element/input (input[0] being the first input) will be disabled. And enabled again with the code below:

var inputs = document.querySelectorAll('.acc-textinput');
if (inputs.length > 0) {
    inputs[1].disabled = false;
    inputs[1].style.setProperty('color', 'rgba(0, 0, 0, 0)', 'important');
}

This code will work no matter how many inputs you've added to the slide. You just need to know how to properly target the input that needs to be disabled. Check the attached video demonstrating scripts above. 

To target a unique ID of an input element, you might use something like id="acc-5nkaJ2cbCf9". To find and reference this ID in your script, you would first need to get it from the developer console and then update your script with a line such as document.getElementById('acc-5nkaJ2cbCf9'). If you need to use the same script on a different slide or with a different TEF, you would need to repeat this process to update the code. Now, imagine you have multiple TEFs that you want to enable or disable based on certain actions. This approach would not be reusable without constantly updating the code. Getting all inputs at the same time and then isolating the specific one you need by its index number proves to be the easiest method that works.

We can also make this more efficient by creating global functions to avoid repeating code, and run this code only when the timeline starts on this slide.



Now we can call a function to disable the TEF under certain conditions:
window.disableInput(0); // 0,1,2,3...



Or call a function to enable the TEF under different conditions or when something else happens: window.enableInput(0); // 0,1,2,3...