We Keep Coding

Using images for radio input buttons without styling label

I'm using an app on my Shopify store which provides product options on an ecommerce site. Annoyingly, I can't work out how I can change the radio buttons for the options so that an image is used for the selection. I've been trying to get this to work for hours but without success.
The problem is that the app outputs the radio inputs in a way that I can't seem to target the label. I've read many workarounds that use the label technique and hiding the input. However, my output looks like this:
<div class="shappify_option_value">
<label class="shappify_radio_option">
<input id="255415_0" class="bold_option_child shappify_option_255415 " type="radio" value="None" data-conditional-value="None" name="properties[Wax finish]" data-product-handle="" data-option-key="rb_255415_0">
None
</label>
<label class="shappify_radio_option">
<input id="255415_1" class="bold_option_child shappify_option_255415 price-change " type="radio" value="Light/clear" data-conditional-value="Light%2Fclear" name="properties[Wax finish]" data-price="8.00" data-variant="25548381447" data-product-handle="wax-finish" data-option-key="rb_255415_1">
Light/clear
</label>
<label class="shappify_radio_option">
<input id="255415_2" class="bold_option_child shappify_option_255415 price-change " type="radio" value="Light brown" data-conditional-value="Light%20brown" name="properties[Wax finish]" data-price="8.00" data-variant="25548382215" data-product-handle="wax-finish" data-option-key="rb_255415_2">
Light brown
</label>
</div>
Is there a way that I can work around this? Ideally I just want to use an image to select between the options without any text.
Thanks for any help with this.

Display field set based on dropdown selection yii 2

I am new to javacripting and Yii2 Framework. Can anyone please help me just to display a set of field values depending on the dropdown selection.
For example, I have in dropdown "If you are a student or not?":
Yes
No
If user selects Yes then display a div containing other fields to be answered.
I could find answers regarding doing it in general but specifically using Yii 2 I am having problems.
Thank you in advance.

This is very simple with jquery... and there's a couple ways you can do it, but here's an example:
//HTML
<input type="radio" name="student" id="studentY" /> Yes
<input type="radio" name="student" id="studentN" /> No
<div id="moreQuestions">
<p>This is your block containing more fields</p>
</div>
//JS
$('#studentY').click(function(){
$('#moreQuestions').show();
});
$('#studentN').click(function(){
$('#moreQuestions').hide();
});
http://jsfiddle.net/95fvgcnn/

Only one checked checkbox allowed in a grid

Is it possible to have a CheckboxColumn in a grid panel that can be checked on only one row at a time ?
I've tried Googling what I'm looking for and I'm not finding much.
Do I need to do something at the store level and at the grid level ? I'm halfway through coding a logic that does it using the checkchange event, but I wondered if I'm writing useless code :)
Thank you.

Your best option as suggested in the comments is to use radio buttons.
The key is to give them all the same name. For example:
<form>
<input type="radio" name="firstname" id="Fred">
<input type="radio" name="firstname" id="Joe">
</form>
Then, when one of these radio buttons is selected, any other radio button with the same name will be unselected.

How to find specific ID with Jquery and perform action

I have 2 styles radio buttons with Enable / Disable, please check below..
<p class="switch-options">
<label class="cb-enable selected" data-id="company_slogan_check">
<span>Enable</span>
</label>
<label class="cb-disable" data-id="company_slogan_check">
<span>Disable</span>
</label>
<input id="company_slogan_check" class="checkbox" type="hidden" value="0" name="company_slogan_check">
<input id="company_slogan_check" class="checkbox main_checkbox" type="checkbox" value="1" name="company_slogan_check" checked="checked">
</p>
and I want to check if the "Enable" button is clicked I want to hide some DIV within the code. I am trying with the following code but nothing works..
jQuery('#company_slogan_check').click(function() {
alert('sssss');
});
it doesnt even respond to the click.. can someone please help..

data-id is not the same as an id, to which the css selector #something would apply to id="something".
It would be easier to use .switch-options input

thanks guys, I did another workaround.. cheers
if($(this).attr('data-id') == "company_slogan_check")
alert('clicked');

first of all ID's need to be unique as already mentioned..
second your not using radio buttons u use a checkbox..
and way not try the ":checked" ?
something like this:
$("#company_slogan_check").change(function(){
if($(this).is(':checked')){
// your function
}
});
hope this was helpful

Button with radio button functionality

I am wondering whether you can make a button, function like a HTML Radio button. I am trying to create a form where the user clicks on the said button and a value is thus selected, but the user is not directed until selecting another option and submitting the form. Does anyone know how to go about doing this?
(I don't mind the use of other languages including javascript etc.)

jQueryUI has a Button Widget that converts radio buttons or checkboxes into buttons.
Example from the site:
http://jqueryui.com/demos/button/#radio
<script>
$(function() {
$( "#radio" ).buttonset();
});
</script>
<div class="demo">
<form>
<div id="radio">
<input type="radio" id="radio1" name="radio" /><label for="radio1">Choice 1</label>
<input type="radio" id="radio2" name="radio" checked="checked" /><label for="radio2">Choice 2</label>
<input type="radio" id="radio3" name="radio" /><label for="radio3">Choice 3</label>
</div>
</form>
</div>
You can visit the link to see it in action.

First, on the page you're talking about, it sounds as if the user is taken somewhere else -- i.e., a submit-like action is taken -- merely by his selecting a radio button. I don't believe that this is the very best practice.
Second, you should imo keep the two radio buttons: they work great and, once selected, a radio button can't be cleared except by selecting another button. This is just what you want.
To be sure that the two buttons you require have been selected, give each button an onclick handler that sets a switch: some button in this group was selected.
Then, when he clicks submit, check those two switches and tell him if he forgot to click a button.
Yes, you need JavaScript to do all this.