JQuery UI Radio Buttons Won’t Switch / Bootstrap Conflict



Hopefully this helps someone –

If you are trying to incorporate the jQueryUI button widget into a website project to add some style to radio buttons, and you cannot get the radio buttons to work and or cannot get them to switch properly like radios are supposed to (or possibly having trouble with other functions related to buttons), are you using bootstrap?

After many attempts to debug, trying refresh and all kinds of other techniques – I disabled bootstrap’s javascript, and everything worked.  Turns out there is a known conflict between bootstrap and jQueryUI, and a little research turned up this easy fix:

var btn = $.fn.button.noConflict() // reverts $.fn.button to jqueryui btn
$.fn.btn = btn // assigns bootstrap button functionality

Placing this workaround in $(document).ready reassigns the conflicting element.  It seems there may be other conflicts, so before spending too much debug time on jQueryUI, try commenting out bootstrap.js.