How to disable/enable specific options on change

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.

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.

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?

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.

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

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.

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