1. Fabrik 3.9 has been released. If you have updated Joomla to 3.9, this is a required update.
    Dismiss Notice

Can't disable a radio button?

Discussion in 'Community' started by mirceat, Apr 20, 2018.

  1. mirceat

    mirceat Member

    Level: Community
    Hello,

    I need to completely disable a radio button but i can't make it work using the built in JS option for elements.

    on click: if first radio button == 'Go' then disable second radio button. Nothing happen, not even an error in debug..

    But it works for hide/fade out/slide out..

    Fabrik 3.8.1 bootstrap template, Joomla 3.8.6 Protostar template

    Thank you
     
  2. jfquestiaux

    jfquestiaux Well-Known Member

    Level: Community
    For that you will need to write a custom JS script. The built-in options won't don what you request.
     
  3. Sophist

    Sophist Well-Known Member

    Level: Community
    I suspect that this is similar to the "clear" issue documented here i.e. that the standard disable method in element.js needs overriding for radio buttons i.e. code adding to elementlist.js.

    I don't think that this would be too hard a PR to write if anyone fancies taking a shot at it.
     
    Last edited: Apr 20, 2018
  4. mirceat

    mirceat Member

    Level: Community
    ok, what action should i call in a javascript? Using disabled = true; doesn't works, the element is still enabled.

    Code (Javascript):

    var bp =  Fabrik.getBlock('form_47').elements.get('contracte_info_generale___bp').get('value');
    var ap = Fabrik.getBlock('form_47').elements.get('contracte_info_generale___ap');

      if (bp == 'Yes') {
      ap.disabled = true;
      ap.update('No');
      } else if (bp == 'No' || bp == 'PS')  {
      ap.disabled = false;
      }
     
  5. Sophist

    Sophist Well-Known Member

    Level: Community
    You need to look at the HTML, then decide (and maybe test manually using your browser's developers tools) what changes to HTML are needed to disable that particular control, and then write javascript accordingly.

    What type of HTML input field is "ap"?
     
  6. mirceat

    mirceat Member

    Level: Community
    both fields are radio buttons
     
  7. Sophist

    Sophist Well-Known Member

    Level: Community
    Ok - in theory you should be able to do this without writing any code using Fabrik's built in javascript actions. But some of these are not working for list-type elements like radio buttons (which is one reason I asked). It is on my Code Contributions wiki list for someone in the community to eventually get around to. See here and here for other recent forum entries about this.

    Someone needs to write the code into elementlist.js to make javascript actions work on list-type elements like radio buttons.
     
  8. cheesegrits

    cheesegrits Support Gopher Staff Member

    Level: Community
    The element FX code isn't currently in the element class(es), it's in the form class. It's probably something we should improve, by having the form class's doElementFX call a method from the target's element class to do the actual FX action, which could then be overridden.

    One thing to note about radios and checkboxes is that "disabling" probably won't have the effect you want, as disabled elements don't submit with the form, so you'd lose any selections. That isn't a Fabrik thing, it's an HTML thing. So you'd probably want to "read only" it instead (in the Fabrik sense).

    A short term fix would be to add something similar to the special case for the 'read only' action on checkboxes:

    https://github.com/Fabrik/fabrik/blob/master/media/com_fabrik/js/form.js#L504

    Something like ...

    Code (Text):

    if (jQuery(target.element).find(':radio').length > 0) {
       jQuery('input[name="' + target.element.id + '[]"]:not(:checked)').attr('disabled', true);
    }
    else ....
     
    ... and ...

    https://github.com/Fabrik/fabrik/blob/master/media/com_fabrik/js/form.js#L514

    Code (Text):

    if (jQuery(target.element).find(':radio').length > 0) {
       jQuery('input[name="' + target.element.id + '[]').attr('disabled', false);
    }
    else ...
     
    This workaround disables all but the selected radio, so the value can't be changed, effectively making it "read only", but it will still submit the current selection.

    I won't make this change just yet, as it's not a critical issue, and I don't want to upset anyone by modifying form.js until I've had a chance to merge some PR's.

    -- hugh
     
  9. mirceat

    mirceat Member

    Level: Community
    Hello,

    so i have to add this code into form.js file? I tried but nothing happen, the radio button isn't set to read only..

    Code (Javascript):
                   
    case 'readonly':
                        if (!groupfx) {
                            //radio buttons
                            if (jQuery(target.element).find(':radio').length > 0) {
                            jQuery('input[name="' + target.element.id + '[]"]').attr('disabled', true);
                            } else {
                            jQuery('input[name="' + target.element.id + '[]"]').attr('disabled', false);
                            }
    ....
     
     
  10. cheesegrits

    cheesegrits Support Gopher Staff Member

    Level: Community
    I wasn't really suggesting you apply that. It was more of a "note to selves" for how to do this once form.js is safe to edit.

    -- hugh
     
  11. mirceat

    mirceat Member

    Level: Community
    I understand. Meanwhile, I need to set the radio button as readonly or any other option that keeps the element visible but not editable..there is any workaround for this?
     
  12. mirceat

    mirceat Member

    Level: Community
    found a quick workaround that works for me:

    Code (Javascript):

    var bp =  Fabrik.getBlock('form_47').elements.get('contracte_info_generale___bp').get('value');
    var ap = Fabrik.getBlock('form_47').elements.get('contracte_info_generale___ap');
    var foo = jQuery("#contracte_info_generale___ap");

      if (bp == 'Yes') {
       foo.attr('readonly','readonly');
      foo.addClass('nochange');
      ap.update('No');
      } else if (bp == 'No' || bp == 'PS')  {
       foo.attr('readonly',false);
      foo.removeClass('nochange');
    ap.update('Yes');
      }
    and in custom_css.php set pointers to none for the class "nochange" applied to the "ap" element

    #$form #group735 .fb_el_contracte_info_generale___ap .nochange {
    opacity: 0.5;
    pointer-events: none;
    }
     

Share This Page