Help for JS to disable dropdown and date fields

[techtr]

I have samples of JS code for regular inputs but they are not working for dropdown and date type fields. Can someone assist how to disable those on the forms so users cannot choose a dropdown value or a date? Thank you.

[Didou12]

I posted a lot of codes in the forum here :

viewforum.php?f=26


Tell me if you are correct with that

[techtr]

Thank you. I am checking those time to time and there are very useful samples of code there. However, I am not able to locate any sample that will specifically disable DROPDOWN and DATE type of fields. Sorry if they are there and I missed them. Can you please check and assist? Thank you.

[Didou12]

Sure maybe I didn’t write all my codes.

Disabled what do you mean ? Hidden or visible with the value but can’t change ?

Can you describe what do you want to see ?

And maybe create a demo as easy way to show you
https://www.rukovoditel.net/demo.php

[techtr]

Hi, visible with the value on the form but can’t change = disabled. Below or similar ones do work on text inputs but NOT on dropdown and date fields. Thank you.

$('#fields_1234').prop('disabled', true);

[techtr]

Any suggestions will be appreciated. Thank you.

[enishemed]

Try one of these, they should work for dropdown.

Use them on form JS section.
1.

Code: Select all

$('#fields_XXXX').attr("disabled", true);

2.

Code: Select all

$('#fields_XXXX_rendered_value').css('pointer-events', 'none');

and use these on on-submit JS section.

1.

Code: Select all

$('#fields_XXXX').attr("disabled", false);

2.

Code: Select all

$('#fields_XXXX_rendered_value').css('pointer-events', 'auto');

You should use 1-1 or 2-2 on both JS sections.

[techtr]

2-2 worked! Thank you very much.

[Didou12]

I recommend to use the 1 and 1 solution,

For 2-2 :
Some browsers have maybe lack of compatibility with this function,
Also, visually I think this approach is less intuitive,
And it can be lack of accessibility for some technologies or support (because of pointers)

[techtr]

Hi, I just noticed that when you use 2-2 only, strangely when user clicks the header of the date field, he/she can alter the field. I tried using both 1-1 and 2-2 on the same JS entry and it worked perfectly fine. I do not know why, just trial and error.
Just fyi, for anyone out there who may need. Thanks again