Radio button, use image to select an option

[insitevision]

Hi,

Instead of the standard radio button I want to use images to select an option.
So, I created a radiobutton element with 2 options and in the label field I entered the path to the image to show.

Now the form shows the radio as well as the image. I can hide the radio with CSS so only the image is shown but now, when an image is clicked I want the other image (the one NOT selected) to have a opacity of 0.4.

I think this can be done by javascript but (I know, due to lack of knowledge) I cannot find out how to achieve this. Can anyone put me in the right direction?

Kind regards,
Eric

 

[insitevision]

Ok, another thread on the forum put me in the right direction. I solved it with this code in Element -> Javascript on load:

jQuery("input:radio[name='tablename___elementname[]']").click(function() {
    var v = jQuery('input[name="tablename___elementname[]"]:checked', '#tablename___elementname').val();
    jQuery('#tablename___elementname label').css('opacity','0.4');
    jQuery('#tablename___elementname label.fabrikgrid_' + v).css('opacity','1');
});

 

[sunnyjey]

This doesn't work correctly for radio-button option under CCD element, as there is no 'fabrikgrid' class for options in CCD like radiobutton element which unsets unchecked class.

Please help me if you know any alternative jQuery function to get it working for CCD.

 

[troester]

Try (I didn't test) something like

jQuery("input:radio[name='tablename___elementname[]']").click(function() {
    jQuery('#tablename___elementname label').css('opacity','0.4');
    jQuery('input[name="tablename___elementname[]"]:checked').parent().css('opacity','1');;
});

 

[sunnyjey]

Thank you for reply.

I tried, but same result. It sets opacity to all radio-button options including non-checked ones. Tried with all combinations including !important. Also tried with onchange as well onclick JS options. Not sure, maybe this is due CCD do not add postfix option value like what it does for radiobutton element fabrikgrid_1, fabrikgrid_2 ...

Can you think of any other alternative solution ?

 

[juuser]

Something like that should do in the click function:

jQuery("input:radio[name*='tablename___elementname[]']").click(function() {
    jQuery(this).parent().parent().css('opacity','1');
    jQuery(this).parent().parent().siblings().css('opacity','0.4');
});

If not, please share screenshot of your page source of the radio options.

 

[sunnyjey]

@juuser
Thank you so much. Your code is working.

I have added this as Tip in CDD wiki Page for others.
https://fabrikar.com/forums/index.php?wiki/cascading-dropdown-element

 

[sunnyjey]

This is getting interested. The above code nicely works if there are only two options.

But, when there are more than two options (for eg say three), it still change opacity for just ONE option (immediate unchecked sibling). The third unchecked option remains SAME.

Not sure, maybe we need to use children() instead of siblings(). I have already tried, but it didn't work.

Any new suggestion, please ?

 

[juuser]

Can you share screenshot of your page source (right-click on radio element -> Inspect).

 

[sunnyjey]

Please check your PM Inbox. I just sent URL.

 

[juuser]

OK, I see you have 2 options per row, so the third option is in another ".row-fluid". Either increase the "Options per row" value in CDD element layout tab or use this code:

jQuery("input:radio[name*='tablename___elementname[]']").click(function() {
    jQuery(this).parent().parent().css('opacity','1');
    jQuery(this).parent().parent().siblings().css('opacity','0.4');
    jQuery(this).closest(".row-fluid").siblings().children().css('opacity','0.4');
});

 

[sunnyjey]

You are awesome. Thank you once again.

 

[sunnyjey]

I am now struggling hard to get same effect for Checkbox Element. The checkbox uses

input:checkbox[name*='tablename___elementname['some_option_value']']

like -

input:checkbox[name*='tablename___elementname['1']']

The code needs some modification with foreach checked condition something like this:

var checked = this.get.value();
jQuery("input:checkbox[name*='tablename___elementname['+checked+']']").click(function() {
    jQuery(this).parent().parent().css('opacity','1');
    jQuery(this).parent().parent().siblings().css('opacity','0.4');
    jQuery(this).closest(".row-fluid").siblings().children().css('opacity','0.4');
});

Any pointer please. Thank you in advance.

 

[juuser]

This works for me with multiselect checkbox and options in several rows:

jQuery("input:checkbox[name*='tablename___elementname']").click(function() {
    jQuery(this).parent().parent().css('opacity','1');
    jQuery(this).parent().parent().siblings().css('opacity','0.4');
    jQuery(this).closest(".row-fluid").siblings().children().css('opacity','0.4');
 });

Do you also need to uncheck all other options when some checkbox checked?

 

[sunnyjey]

Thank you once again.

This new code is working for checkbox,

BUT, it sets opacity of 1 to just LAST checked option. If multiple options are checked, it should set opacity of 1 to ALL checked options (NOT the just LAST checked one).

 

[juuser]

OK, then something like this should do:

jQuery("input:checkbox[name*='tablename___input-element-name']").click(function() {

   
    jQuery(this).parent().parent().css('opacity','1');
   
    jQuery("#your_checkbox_element_id").find("input:checkbox[name*='tablename___input-element-name']:not(:checked)").each(function(){
        jQuery(this).parent().parent().css('opacity','0.4');
    });

});

Replace "your_checkbox_element_id" with the id of the parent div element (where the class is "fabrikSubElementContainer").

 

[sunnyjey]

This code is not working. Maybe because I am using CheckBox for Database Join element (not CDD). I have just sent you URL on PM.