Radio button disabled and checked

Radio button disabled and checked

  
Hello Team,

On load of the page,  the radio button needs to be checked and disabled.
Im doing this in the Preparation (I am assigning the value to the variable of the radio button ) and its working as expected in IE.
However in chrome it is only disabled but not checked, I tried setting the checked attribute of radio button to True in jquery, still no success.I inspected the element in chrome, the checked attribute of the radio button is set to checked but its not showing as checked in UI.For Dublin theme and London layout , both its the same issue.
 
In IE it works fine , but in chrome its only disabled but not checked.
 
I tried setting radio button checked attribute to checked in jquery, it did not solve the issue in chrome.
Is there any way to do in Outsystems.(using preparation or anything) because I have multiple radio buttons in my form (radio button keep adding when the project flows) depending on the database value I am checking the radio button and disabling it.There are multiple scenarios for checking the radio  button and disabling and enabling.
 
Thanks in advance!
 
Shweta
Hi Shweta,

I just created a minimal example, and it seems to work fine in Chrome. So,
1) How do you "disable" the Radio Buttons? I assume by setting the Enabled property to False? If so, try setting Enabled property to True and see whether still none are selected.
2) Do all Radio Buttons have their Variable set to the same variable? Is that variable set in the preperation to a value that's equal to the Value property of one of the Radio Buttons?
Hi Kilian,

Thank you for response.
A minimal example where radio button is disabled by setting Enabled property to false and setting the value that's equal to the Value property of the Radio Button, is not working in Chrome (it is disabled but not selected) .IE is fine, no issues with IE.

1: I am enabling and disabling using Enabled property. It will show as selected when Enabled property is set       to true. But when I set enabled property to false it will not show as selected.(Suppose if I print the page ,it         will show as selected in the page printed) and when I inspect it , the checked attribute is set to checked.

2: In a web screen I am displaying multiple web blocks and each web blocks  I have radio buttons( Yes, all           radio buttons have same variable), I am setting the value of the variable of the radio button in the                     preparation of each web block.So each web block take value from its preparation. IE is fine only chrome its not selected.

Thanks,
Shweta
   

Hi Shweta,

This is really odd, especially since I had no problems with a disabled radio button. See the minimal example attached, which shows this in Chrome:



As you can see, the lower two have nicely disabled radio buttons.
Hi Kilian,

Yes without any style applied it works fine:)
As told  in my first post, I was using Dublin theme.
So,only google chrome (not IE) was implementing the style defined by dublin theme for radio button for different scenarios (disabled , selected, before and after). 
So I had to override that style to make it work in chrome.

Regards,
Shweta
Hi Shweta,

I have created sample application using Dublin template and it is working fine for me in chrome (Version 46.0.2490.80 m). This could be issue with the specific version of chrome.

Let me know your version of chrome and also share sample application.

Regards,
Sagar Nannaware
Hi Sagar,

Issue is when radio button is disabled.
Meaning when the radio button is disabled it will not show as selected when the value is equal to the value of the variable set to radio button.
The version of the chrome is Version 46.0.2490.80 m.
I had to override the style to make it work in chrome.
Have attached the sample application.


Regards,
Shweta
Since this seems a problem specific to SilkUI, you may want to post it in the SilkUI bugs thread here. Glad to see you created a workaround.
Hi Shweta,

There is very small fix for this issue, just override style for disabled property of radio as below,

input[type="radio"]:disabled:before, 
input[type="checkbox"]:disabled:before {
    background: #fff;
}
Please find attached sample for your reference. Hope this will resolve your issue.

Regards,
Sagar Nannaware

Shweta Kalghatgi wrote:
Hi Sagar,

Issue is when radio button is disabled.
Meaning when the radio button is disabled it will not show as selected when the value is equal to the value of the variable set to radio button.
The version of the chrome is Version 46.0.2490.80 m.
I had to override the style to make it work in chrome.
Have attached the sample application.


Regards,
Shweta
 
 
Sagar Nannaware wrote:
Hi Shweta,

I have created sample application using Dublin template and it is working fine for me in chrome (Version 46.0.2490.80 m). This could be issue with the specific version of chrome.

Let me know your version of chrome and also share sample application.

Regards,
Sagar Nannaware

Hi Sagar,

As told in my previous posts I have already overridden the style to make it work in Chrome.
But if I print the page the selected radio button is not displayed , meaning if there are 2 radio buttons out of which 1 is selected , in the print page instead of displaying 1 as selected, it isn't .
It is diaplaying as both unselected ..This is some styling issue.
I did a work around by using 
@media print  and giving the radius of the inner small circle of the radio button, which could not solve the issue.
Could you please suggest Me on this.

Regards,
Shweta
 
 
Hi Shweta,

Try to override style in @media query for print type?

Regards,
Sagar Nannaware

Shweta Kalghatgi wrote:
Sagar Nannaware wrote:
Hi Shweta,

I have created sample application using Dublin template and it is working fine for me in chrome (Version 46.0.2490.80 m). This could be issue with the specific version of chrome.

Let me know your version of chrome and also share sample application.

Regards,
Sagar Nannaware

Hi Sagar,

As told in my previous posts I have already overridden the style to make it work in Chrome.
But if I print the page the selected radio button is not displayed , meaning if there are 2 radio buttons out of which 1 is selected , in the print page instead of displaying 1 as selected, it isn't .
It is diaplaying as both unselected ..This is some styling issue.
I did a work around by using 
@media print  and giving the radius of the inner small circle of the radio button, which could not solve the issue.
Could you please suggest Me on this.

Regards,
Shweta