[Resolved] Limit number of selections in a Multi-Select field + Fields not to be selected

[Author]

Posts

[Jaime]

I had this working fine in my website, but suddenly one user noticed me the problem.
The thing is I used to have a multi-select field in a post form where users can select a maximum of three categories, and two of the categories where disabled.

I reached this with this tickets:
https://toolset.com/forums/topic/category-not-save-values-in-edit-form/
https://toolset.com/forums/topic/make-parent-taxonomy-in-a-dropdown-non-selectable-2/

This used to work fine, but now nothing of it it's working.
Can you help me please?

This is what I got:
-> The Form:
<div class="col-sm-8">
<div class="js-example-basic-multiple-limit">
<label><h5>[wpml-string context='wpv-views']Categorías *[/wpml-string]</h5></label>
<br>
<div class="js-example-basic-multiple-limit">
[cred_field field='categoria-guia-produccion' force_type='taxonomy' output='bootstrap' display='select' class='js-example-basic-multiple-limit select2']
<i class="texto-descriptivo"> Tres categorías como máximo </div>
</div>
</div>
-> The Js code:
$(".js-example-basic-multiple-limit > div > select").select2({
placeholder: "Selecciona categoría",
maximumSelectionLength: 3
});

//Este código es para desabilitar la primera opción del selector de categorias "PROFESIONAL" Para modificar el contenido hay que cambiar el número que se incluye en option:eq:(0). Este 0 es el primer número del listado. Hay que contar el número del campo y completarlo ;

jQuery(document).ready(function($){

jQuery("select[name='categoria-guia-produccion[]']").each(function(){
id = $(this).attr("id");

jQuery('#'+id+' option:eq(0)').attr("disabled", "disabled");

});

//jQuery("select[name='categoria-guia-produccion[]'] option:eq(1)").attr("disabled", "disabled");

});

//Este código es para desabilitar la opción del selector de categorias "EMPRESAS", que actualmente tiene el número 58 de la lista. Puede variar si se introducen más categorías;

jQuery(document).ready(function($){

jQuery("select[name='categoria-guia-produccion[]']").each(function(){
id = $(this).attr("id");

jQuery('#'+id+' option:eq(59)').attr("disabled", "disabled");

});

//jQuery("select[name='categoria-guia-produccion[]'] option:eq(1)").attr("disabled", "disabled");

});

[Christian Cox]

Hi, I assume we are discussing the Form here:
hidden link

If you open the browser console, you can see several JavaScript errors. I am fairly certain these are part of the problem. The first error:

Uncaught TypeError: $ is not a function ... at (index):942

That corresponds to the following code on your site:

$(".js-example-basic-multiple-limit > div > select").select2({
    placeholder: "Selecciona categoría",
	maximumSelectionLength: 3
});

This code is not placed inside a jQuery document ready callback like the other jQuery code, and it's throwing a namespace error. It's best to use 'jQuery' instead of $, but you can work around that by wrapping the code in a document ready callback like this, or adding it to an existing jQuery document ready callback:

jQuery(document).ready(function($){
  $(".js-example-basic-multiple-limit > div > select").select2({
    placeholder: "Selecciona categoría",
	maximumSelectionLength: 3
  });
});

Next, you must exclude some key JavaScript files from minification processes like autoptimize:
hidden link

See this post for the files you should exclude:
https://toolset.com/forums/topic/what-files-to-exclude-from-wp-rocket/

Those are the first two things I would try, then clear your caches and let me know the results. We can continue troubleshooting after those steps if necessary. Thanks!

[Jaime]

My issue is resolved now. Thank you!