Hello

i was going to suggest a fix for this, but never did

• with change at the form fields creation, and not at the template

i don't remember 100%, but i had tested at the disabled field something like

something like

.css('pointer-events', 'none').off('click');

but your PR seems good i will test it tomorrow

@ggppdk thanks for the tip.
I was looking at the layout and it seems that the disabled is calculated/passed properly in the foreach loop (only the parent fieldset + not active input gets it), so it is the javascript that doesn't respect that property.

I have tested this item ✅ successfully on eea66ef

I guess this only works if we have the btn-group-yesno class but this is no requirement or I reading it wrong?

@zero-24 that's right, this apply only for the btn-group-yesno class. Is there a problem also for normal radio?

Why would you ever want to disable them?

@brianteeman

1. sometimes you would want to let the field show
   to let the user see it but don't allow user to use it

2. also at a later time someone can re-enable it programmatically with something like:

// enable clicks on fieldset
fieldSet.removeAttr('disabled').removeClass('disabled').css('pointer-events', 'auto').on('click');

// find inner disabled inputs and enabled them
fieldSet.find('input').removeAttr('disabled');

@brianteeman according to standards a radio input CAN be disabled: http://www.w3.org/TR/html-markup/input.radio.html

@dgt41

yes we want to fix the bootstrap issue of allowing clicks, in case of not using bootstrap then all browser should handle disabled "input" correctly

just you should use:

btn-group

and not limit it to

btn-group-yesno

some radio-set only use: btn-group
instead of: btn-group btn-group-yesno

thus if use: btn-group
it does not work

This PR has received new commits.

CC: @wojsmol

Yes, now works

what about making the code similar to the other selectors:

• i noticed that other selectors don't limit .btn-group to "fieldset" ?

so maybe code should be:

$('.btn-group').each(function() {
    // Handle disabled property
    if ($(this).prop('disabled')) {
        $(this).addClass('disabled').css('pointer-events', 'none').off('click');
    }
});

This PR has received new commits.

CC: @wojsmol

I have tested this item ✅ successfully on c4713cf

@dgt41

thanks for the latest change, just you forgot a space:

selector

$('fieldset .btn-group')

should be without space:

$('fieldset.btn-group')

[EDIT]
if you let the space be there, it will only work
if the fieldset.btn-group is inside an outer fieldset, which usually is true, but we should not rely on this

This PR has received new commits.

CC: @brianteeman, @wojsmol

@ggppdk just to clarify why I didn't use just the class btn-group as the selector: it's used in many other cases in bootstrap, so it might backfire...

I have tested this item ✅ successfully on dfc21dc

also i see your point for using

$('fieldset.btn-group')

instead of

$('.btn-group')

yes, i think it is better to do it like this, playing safer, and adding a case in future if needed

@dgt41

Ok 1 more test needed,

but these file should be updated too, with same code (but different PR ?), :
https://github.com/joomla/joomla-cms/blob/staging/installation/template/index.php#L93
https://github.com/joomla/joomla-cms/blob/staging/templates/beez3/javascript/template.js#L15
https://github.com/joomla/joomla-cms/blob/staging/templates/protostar/js/template.js#L15

also same JS is needed for "readonly" case, but that will also need layout updating of the form element (i think) and a new CSS class for styling ?, so it should be a different PR

• a CSS class that will not effect background but will instead reduce strength color of the letters (or better make letters italic ?), is there one such CSS class already by isis template ?

Relevant issue:
#8996

I have tested this item ✅ successfully on dfc21dc

This PR has received new commits.

CC: @brianteeman, @ggppdk, @wojsmol

@ggppdk about readonly: that needs to be handled in the layout similar to other inputs (if readonly then attach disabled)

Applied patch with patch-tester and tested all 4cases and it worked, but only "isis" template has class "disabled", thus CSS lower opacity appear only for it

• tested installation,
  renamed 'configuration.php'
  and edited file installation\model\forms\site.xml
  ... added 'disabled="true" to 'site_offline' parameter, (it is already type="radio" class="btn-group")

• (re)tested backend "isis" template

• tested both frontend templates protostar, beez3 (for this , i added 'com_content' to components needing bootstrap, in template configuration, if bootstrap CSS is not loaded then browser does the job already, so good in this case too),

tested by changing 'state' of 'components\com_content\models\forms\article.xml'
to ' type="radio" class="btn-group" disabled="true" '

Maybe change:

$(this).addClass('disabled').css('pointer-events', 'none').off('click');

to ?

$(this).css('pointer-events', 'none').css('opacity', '0.65').off('click');

although i understand that unline 'pointer-events', which is a matter of proper behaviour of the disabled element,

the opacity for the element, in order to look disabled, should be left to the CSS of the template ...

@ggppdk but .btn-(primary, danger, success, info, warning, link).disabled are standard defined bootstrap classes, therefore adding this class is the same as the inline style opacity: .65;. Am I getting this wrong?

@dgt41

yes you are right that should work,
you can add the 'disabled' CSS class to the 'btn' elements instead of the FIELDSET

so it will be:

$('fieldset.btn-group').each(function() {
    // Handle disabled, prevent clicks on the container, and add disabled style to each button
    if ($(this).prop('disabled')) {
        $(this).css('pointer-events', 'none').off('click');
        $(this).find('.btn').addClass('disabled');
    }
});

I have tested this item ✅ successfully on 0616b14

@Ruchiranga

There are 4 changes, not 1 to be tested, 4 templates were changed not 1

@dgt41

can you try my suggestion and add disabled class to the elements with 'btn' clas instead of the 'btn-group' container element

i have tested it, and it worked in all 3 templates and during installation too

This PR has received new commits.

CC: @brianteeman, @ggppdk, @Ruchiranga, @wojsmol

@ggppdk Done! Thanks!

This PR has received new commits.

CC: @brianteeman, @ggppdk, @Ruchiranga, @wojsmol

I have tested this item ✅ successfully on 569cc56

Applied patch with patch-tester and tested all 4 cases and ' disabled="true" class="btn-group" ' worked as expected

• preventing clicks on the buttons
• buttons appear as disabled

Of course without disabled="true" the buttons appear and work / submit normally

1 . tested installation,
renamed 'configuration.php'
and edited file installation\model\forms\site.xml
... added 'disabled="true" to 'site_offline' parameter, (it is already type="radio" class="btn-group")

1. Tested backend "isis" template modifying the "featured" field
2. Tested both frontend templates protostar, beez3 (for beez3, i added 'com_content' to components needing bootstrap, in template configuration, if bootstrap CSS is not loaded then browser does the job already, so good in this case too),

tested by changing 'state' of 'components\com_content\models\forms\article.xml'
to ' type="radio" class="btn-group" disabled="true" '

I have tested this item ✅ successfully on 569cc56

Applied the patch according to testing instructions. All the cases works good!

RTC. Thanks