Jquery to target same id as class name of clicked element?

Question

I'm trying to use jquery to enable a form button only after a radio button has been selected. It's a t-shirt shop where the user is required to choose a size before the 'add to cart' button becomes enabled. The html looks a bit like this:

<input class="radioclick product21" type="radio" name="variation[variation_select_21_1]" value="1">Big
<input class="radioclick product21" type="radio" name="variation[variation_select_21_2]" value="2">Small

<input type="submit" id="product21" class="buy_button" name="Buy" disabled="disabled" value=" ">

So, the submit button is disabled. To enable it when the user clicks a radio button, I use this jquery:

$(function()
{
     $('.radioclick').click(function()
    {
        $('.buy_button').removeAttr('disabled');
        $('.buy_button').attr('value', 'add to cart');  
    });
});

However, that enables ALL the submit buttons on the page (there's lots of t-shirts on the page). The second class name of the radio button is the same as the id of the submit button, so is there a way to use this classname to target the enabling of the specific submit button?

(hope that all makes sense!)

Answer 1

You will need to give the radio buttons unique ids or at least add them to parent div with a unique id instead because $('.radioclick').click is going to execute every time a radio button of that class is clicked like you said.

$('#parentID').('.radioclick').click(...)

Assuming you split the different groups into sections with unique ids.

Answer 2

with the html you showed, next method comes to mind.
example:

$(function()
{
     $('.radioclick').click(function()
    {
        $(this).next('.buy_button').removeAttr('disabled');
        $(this).next('.buy_button').attr('value', 'add to cart');  
    });
});

If the markup is wrapped in a container (div or otherwise), you could get the id/class from the container to look for the submit button in the container:

$(function()
{
     $('.radioclick').click(function()
    {
        var containerClass = $(this).parent().attr("class");
        $('.buy_button', containerClass).removeAttr('disabled');
        $('.buy_button', containerClass).attr('value', 'add to cart');  
    });
});

take a look through the selectors. You can get pretty creative with them. http://docs.jquery.com/Selectors

Answer 3

To answer your question exactly:

$(function() {
    $('.radioclick').click(function(){
        var id = this.className.split(' ')[1]; // second class
        $('#' + id).removeAttr('disabled').attr('value', 'add to cart');  
    });
});

But there are less invasive ways to do it, but it depends on your markup.

EDIT: Since you said each is in their own form, just use this code:

$(function() {
    $('.radioclick').click(function(){
        $(this).closest('form')
               .find('.buy_button')
               .removeAttr('disabled')
               .attr('value', 'add to cart');  
    });
});

This takes the radio button that was clicked, finds the parent form, then scopes the search for the .buy_button to that form only.

Answer 4

Use a wrapper with div or p or table cell etc. My sample below uses div with a class "wrapper_<%=productid%>" in the ASPX.

Rendered HTML:

<div id="wrapper_product21">
<input class="radioclick product21" type="radio" name="variation[variation_select_21_1]" value="1">Big
<input class="radioclick product21" type="radio" name="variation[variation_select_21_2]" value="2">Small

<input type="submit" id="product21" class="buy_button" name="Buy" disabled="disabled" value=" ">
</div>

Rendered Javascript:

$(function()
{
     $('.radioclick').click(function()
    {
        var productButton = $('#' + "wrapper_" + $(this).id + ' .buy_button');
        productButton.removeAttr('disabled');
        productButton.attr('value', 'add to cart');  
    });
});

Answer 5

If you really like the idea of using that second class name to specify the id of the submit button you want to use you can do that (I'm not endorsing it, but if that's what you want to do... haha) , but you'll need to get goofy with looking at the classes.

This, of course is completely untested, lol... but give something like this a try (this assumes that 'product' will always be the start of the submit button's id):

$(document).ready(function() {
   $('.radioclick').click(function() {
      var classAttr = $(this).attr('class');
      var classes = classAttr.split(' ');
      var submitId;
      for(var i = 0; i < classes.length; i++) {
         var c = classes[i];
         if(c.indexOf('product') == 0) {
            submitId = c; 
         }
      }
      if(submitId) {
         $('#' + submitId).).removeAttr('disabled').attr('value', 'add to cart');  
      }
   });
});

Answer 6

I'm not sure I get exactly what you want and hence I'm not sure it's the best way to do what you are trying to do... There might be something more elegant to try but here's a way to target the ids of the second classes 'productXY':

$('.radioclick').click(function() {
    var id = null;
    var classes = $(this).attr('class');
    if (id = classes.match(/product[0-9]*/)) {
        $('#' + id).removeAttr('disabled').attr('value', 'add to cart');              
    }
});

Answer 7

Based on the element hierarchy you have provided, the easiest is to check the siblings for an element with a class buy_button and change it:

$(function()
{
     $('.radioclick').click(function()
    {
        $(this).siblings('.buy_button')
               .removeAttr('disabled')
               .attr('value', 'add to cart');

    });
});