Good day!

On the site you need to make a plugin for fitness classes.

fitness.ad-rocket.com.ua/schedule

I found a suitable plugin for me, except for one moment. The filter in the plugin is implemented as a checkbox, and I wanted to make a radio.

I got into the code and changed it on the radio, but it did not work.

Schedule displays remained the same as with the checkbox functionality, that is, you could click on all filter categories and they would all become active, but the filters themselves would work as with the Radio functionality when you select one, the others were removed, but this is only outwardly The content was displayed as with all selected filters.

Next came the idea through javascript to remove all the checkbox except the selected

$('.wcs-filter').on('click', function(){ $('.wcs-filter').not(this).prop('checked', false); });

But again it did not work, it just does not work. Although I do not understand why. After all, it just works with html. When I use it outside the plugin everything works. https://codepen.io/chaly7500/pen/WzgVNW

Maybe it conflicts with other javascript or there is some kind of error.

So the question is, Is it possible to look through the developer tools or through another service, because of what it does not apply when I use the plugin?

    1 answer 1

    Open the dev tools. Enjoying the Elements. Find the .wcs-filter . We look to the right Event Listeners. We see that on click only scripts of bootstrap hang. It is clear that your elements do not respond to click. Why?

    And because you run the script in the body of the page in a rather strange way

     <script type="text/x-template" id="wcs_templates_filter--checkbox"> <label class='wcs-filters__filter-wrapper' :class="level == 1 ? 'wcs-filters__filter-wrapper--padded' : ''"> <input v-bind:value="value" v-on:change="updateModelValue" :id='unique_id + "-filter-" + slug' type='checkbox' class='wcs-filter' :name='name' :value='slug'> <span v-html="title"></span> </label> $('.wcs-filter').on('click', function(){ $('.wcs-filter').not(this).prop('checked', false); }); </script>

    As soon as I threw out the html-code from this script and executed it in the console, the clicks on the buttons began to work in a planned way.

    • thanks) So I started to work, though it turned out the same story as with radio ( - Vladislav Chaly