[Resolved] Generic select field with "Get options from a shortcode" — disable options

[Author]

Posts

[Lara]

Tell us what you are trying to do?

I have a generic select field and I use the option "Get options from a shortcode".
My shortcode outputs the following content:
{"value": "value1", "label": "Label 1"}, {"value": "value2", "label": "Label 2", "default": true}

Is there a way to disable certain options in JSON? So, that the option can be seen, but not selected.. ?
I tried the following:
{"value": "value2", "label": "Label 2", "disabled": true}

However, it doesn't work.

Is there any documentation that you are following?
no

Is there a similar example that we can see?
no

What is the link to your site?
hidden link

[Christian Cox]

Hello, I'm not aware of a way to disable an option via the JSON-like data passed into a generic field's configurations. I can't find any other examples here in the forum that mention the availability of such an attribute, nor is one shown in any documentation...I don't think it is supported or possible. So I think the only way to disable one or more of these options would be to use custom JavaScript to add the 'disabled' attribute to the option tag after the page has loaded and the form has been initialized. There is currently no reliable JavaScript event hook available for determining when a Toolset Form is initialized, so you can try the document.ready hook first. If that event hook is too soon, you can try adding a short timeout (1000ms or less) before setting the disabled attribute programmatically.

[Lara]

Many thanks Christian. While I looked through the documentation, I couldn't find anything, too. But as I am not very familiar with JSON, I thought, that maybe there is a way and I just don't see it.. : ) sorry

The problem is, that whether or not an option should be disabled is dynamic. So each post can have its own settings.

At the moment I use a checkboxes field to generate the JSON output (see picture).

Generic field with checkboxes shortcode:

[cred_generic_field field='von-uhrzeit' type='select' class='ortsparameter' urlparam='']
{
"required":1,
"validate_format":0,
"default":[],
"persist":1,
"options":[ [types field='uhrzeitenblock-15-minuten-schritte' separator=' , '][/types] ]
}
[/cred_generic_field]

It's lovely, it only outputs the checked options of the checkboxes field as JSON. However the users of the website, asked if it is possible to add the not selected options as "readonly" / disabled, so that they can be seen but not selected.

So, I tried to implement your suggestions... Can you give me a hint, how I can incorporate the timeout - and target the options and not the entire field?

jQuery(document).ready(function($){
$('select[name="von-uhrzeit"]').attr('disabled',true);
  });
});

Kind regards
Lara

[Christian Cox]

Can you give me a hint, how I can incorporate the timeout - and target the options and not the entire field?
You can add a setTimeout function inside the document.ready handler, then apply the disabled attribute directly to one or more options like this:

// options disabled automaicly  
// https://toolset.com/forums/topic/generic-select-field-with-get-options-from-a-shortcode-disable-options/
jQuery(document).ready(function($){
  var duration = 1000; // timer duration, in ms  
  var timeout = setTimeout( duration, function(){
      // this function is triggered 1000ms after the document ready event
     $('option[name="your-option-sectg-1"]').attr('disabled', true);
     $('option[name="some-option-name-2"]').attr('disabled', true);
  });
});

See some information about the setTimeout function here:
https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout

[Lara]

Many thanks Christian.

Final solution:

Generic field:

[cred_generic_field field='von-uhrzeit' type='select' class='ortsparameter' urlparam='']
{
"required":1,
"validate_format":0,
"default":[],
"persist":1,
"options":[ [types field='uhrzeitenblock-15-minuten-schritte' option='0'][/types] , [types field='uhrzeitenblock-15-minuten-schritte' option='1'][/types] , [types field='uhrzeitenblock-15-minuten-schritte' option='2'][/types] , [types field='uhrzeitenblock-15-minuten-schritte' option='3'][/types] , [types field='uhrzeitenblock-15-minuten-schritte' option='4'][/types] , [types field='uhrzeitenblock-15-minuten-schritte' option='5'][/types] , [types field='uhrzeitenblock-15-minuten-schritte' option='6'][/types] , [types field='uhrzeitenblock-15-minuten-schritte' option='7'][/types]]
}
[/cred_generic_field]

Dabei ist [types field='uhrzeitenblock-15-minuten-schritte'][/types] ein Checkboxes field. If a checkbox is selected (e.g. the first checkbox), the shortcode [types field='uhrzeitenblock-15-minuten-schritte' option='0'][/types] will output {"value":"1","label":"6:00 Uhr", "default": true} (see picture in a previous post). If the first checkbox is not selected it will output {"value":"1","label":"6:00 Uhr • timeslot is blocked"}. The user will see this field, but it will be disabled due to the JavaScript snippet below. The key word is "blocked". For each Checkboxes field option the radio box "Show one of these two values: o " should be selected. Otherwise the solution will not work.

I added the following JavaScript snippet to the JavaScript section in the form. The word 'blocked' in the JavaScript snippet, can be substituded with any other word as long as this word is also used in the checkboxes field options, that should be disabled.

JavaScript

// options disabled automatically
// https://toolset.com/forums/topic/generic-select-field-with-get-options-from-a-shortcode-disable-options/
jQuery(document).ready(function($){

$("select option:contains('blocked')").attr('disabled', true); 
 
});