Jquery 将相同的 id 定位为单击元素的类名？

Question

我尝试使用 jquery 仅在选择单选按钮后启用表单按钮。 这是一家 T 恤店，用户需要在“添加到购物车”按钮启用之前选择尺寸。 html 看起来有点像这样:

<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=" ">

因此，提交按钮被禁用。为了在用户单击单选按钮时启用它，我使用这个 jquery:

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

但是，这会启用页面上的所有提交按钮(页面上有很多 T 恤)。单选按钮的第二个类名与提交按钮的id相同，那么有没有办法使用这个类名来定位特定提交按钮的启用？

(希望一切都有意义!)

Answer 1

准确回答您的问题:

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

但是有一些侵入性较小的方法可以做到这一点，但这取决于您的标记。

编辑:既然你说每个都有自己的形式，那么只需使用以下代码:

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

这将获取单击的单选按钮，查找父表单，然后将 .buy_button 的搜索范围仅限于该表单。