How to disable/enable specific options on change

General
1

I have figured out how to disable/enable all select list options on change with:

    for (var x = 0; x < $("#node-input-event")[0].childElementCount; x++) {
        $('#node-input-event')[0][x].disabled = true;
    }
    $("#node-input-event").val("arrive");

But I can't quite seem to figure out how to enable/disable specific ones. I've searched quite a bit and haven't been able to locate a solution that works. In fact, it took quite some searching to stumble on the above.

2

There are different ways to do this... disable all, then re-enable the specific one desired, for example. I tend to use an array and pass that out of a function node that I feed back into the UI object(s).

So if I have three buttons, and I want to and enable one, disable two... [ true, false, false] for example, then the function node is set to have 3 outputs, so a message is send to each UI element as msg.enabled = true for 1, msg.enabled = false for 2, and msg.enabled = false for 3. Would think the same would be similar for options in a list, drop down menu, etc. Just all depends on how the given UI object accepts change of state? For example, ui-list nodes, want to have an array of objects, where each object has a title and value.

But I think for disable or enable on some UI nodes you will need to use msg.control method. Or maybe this node can help? https://flows.nodered.org/node/node-red-contrib-ui-actions. All comes down to which widget your are planning to use and where.

3

OK. My question is, "How?". I'm not adept at javascript. I tried to find out what other attributes there are other than .disabled. Like, if I knew how to get the value of an option (whether or not it was selected), I could put a conditional in the loop to decide whether to enable or disable. I even tried setting the selected option first and use the selected state to decide whether to enable/disable. But I just don't know the structure of these objects. Is there a way to print the attribute names so I can see what's there to use?

4

I figured out a work-around for my lack of javascript knowledge and inability to execute suitable documentation searches ( :wink: ). I know the order of the elements. I can just hinge on the index:

$("#node-input-event").val("leave");
for (var x = 0; x < $("#node-input-event")[0].childElementCount; x++) {
    if (x !== 1) {
        $('#node-input-event')[0][x].disabled = true;
    } else {
        $('#node-input-event')[0][x].disabled = false;
    }
}

It would be nice to be able to know which option I'm on other than indirectly using the index, but whatever. It works.

5

Off the top of my head...
$("#node-input-event > option[value='item1']").attr("disabled", "disabled");
Where item1 is the value of the option you want to disable.

(Untested - the selector might not be 100%)

1 Like
6

I can just hinge on the index

Actually, some of the UI nodes, return the index as the only way of knowing which item is selected, the ui-list is one such, that returned the 'selected item' as an index of the array of 'list items' that were used to create the list.

7

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.