disabled yes/no

[wezetel]

Has anybody an idea how the yes/no plugin could be shown disabled with JS like the third example in this link -> http://vsn4ik.github.io/bootstrap-checkbox/ ?
As the Yes/No Plugin only shows as buttons the only solution I have found so far is using radio buttons plugin in standard mode (not using buttons) and issuing the following command:

 block.elements.get('table___element').subElements[0].disabled=true;

 

[Bauer]

I've tried doing this a few times. Disabling the element has no effect on the javascript events already in play. After days of confusion, it turns out it could be done with 4 lines of code.

The confusing thing about the yes/no plugin is that some of the click events were created by mootools and some by jQuery. You have to know which click event had been set by which javascript plugin in order to know what code to use to unbind or remove the click events on the element. (e.g. Look at the 'Event Listeners' tab in Google Chrome Developer tools)

After figuring that out, this code (included in the form_#.js file) worked fine.

It has to be run only after all the elements are loaded in the form and the yes/no element is set (rendered properly). So I put the code in a Fabrik.addEvent for 'fabrik.form.element.added'.

    Fabrik.addEvent('fabrik.form.elements.added', function (block) {

     /* remove events set with mootools */
     $$('div[class*=fb_el_test_list___test_yesno').removeEvents('click');
     $$('input[name^=test_list___test_yesno').removeEvents();
     /* remove events set with jQuery */
     jQuery('#test_list___test_yesno fieldset label[class^=fabrikgrid_]').unbind('click');
     /* change cursor to not-allowed */
     jQuery("#test_list___test_yesno fieldset label").css("cursor","not-allowed");    

});

 

[wezetel]

Thank you Bauer,

even I didn't get your code to work yet (my JS knowledge is on a beginner level) I at least understood the principle and see that it is far more complicated than I have thought. So I will see if time allows me to dig deeper or if I just use standard radio buttons, where I just can set disabled="true" .
Not so nice looking, but the functionality counts at the end.

Thanks again!!

 

[Bauer]

My example is using the bootstrap tempate. If you are using the bootstrap template all you should have to do is replace all occurrences of "test_list___test_yesno" with the full element name for the eyes/no element you are using - and remove any other javascript you might have applied to the element. This code will preserve the functionality of the element (write the value back to the table when the form is submitted) - it just restricts the user from changing the value via the conventional means of clicking the buttons.

Oh - and put that code inside the requirejs function. You'll need that to assure the element gets initialized first before my code is run. So my example should have been more like this...

requirejs(['fab/fabrik'], function () {
    Fabrik.addEvent('fabrik.form.elements.added', function (block) {
          /* remove events set with mootools */
          $$('div[class*=fb_el_test_list___test_yesno').removeEvents('click');
          $$('input[name^=test_list___test_yesno').removeEvents();
          /* remove events set with jQuery */
          jQuery('#test_list___test_yesno fieldset label[class^=fabrikgrid_]').unbind('click');
          /* change cursor to not-allowed */
          jQuery("#test_list___test_yesno fieldset label").css("cursor","not-allowed");  
     });
});

And all that is inlcuded in the form_#.js file.
Per the Wiki - http://fabrikar.com/forums/index.php?wiki/form-javascript/#form-view (which I now notice isn't quite right - so it's fixed below)...
Create a form_XX.js file in components/com_fabrik/js, where XX is your numeric form ID, and put your functions in there.

 

[wezetel]

That did it! Now the yes/no field isn't clickable anymore.
But I think I need to read a lot more documentation (and for sure try) to re-enable the yes/no field on the fly, if other fields content will change...
Hard time ahead.

Nonetheless Bauer: thank you so much!