Can't disable a radio button?

[mirceat]

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

 

[jfquestiaux]

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

 

[Sophist]

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.

 

[mirceat]

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

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;
  }

 

[Sophist]

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"?

 

[mirceat]

both fields are radio buttons

 

[Sophist]

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.

 

[cheesegrits]

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 ...

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

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

 

[mirceat]

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..

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);
                        }
....

 

[cheesegrits]

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

 

[mirceat]

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?

 

[mirceat]

found a quick workaround that works for me:

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;
}