user889349 user889349 - 7 months ago 222
Javascript Question

Bootstrap accordion disable controls

I'm using the snippet below to:


  • disable all :input elements in hidden panels;

  • enable all :input elements in visible panel (Just one panel can be opened);

    $(".panel").on("show.bs.collapse", function(e) {
    $(this).find(':input').attr('disabled', false);
    });

    $(".panel").on("hide.bs.collapse", function(e) {
    $(this).find(':input').attr('disabled', true);
    });



But it seems to not working right. How can I fix this? Thanks!
P.S: All panels are hidden after page has been loaded.

Answer

Try replacing attr() with prop(). http://api.jquery.com/prop/

$(".panel").on("show.bs.collapse", function(e) {
    $(this).find(':input').prop('disabled', false);
});

$(".panel").on("hide.bs.collapse", function(e) {
    $(this).find(':input').prop('disabled', true);
});