Jquery将相同的id作为被点击元素的类名?

时间:2009-11-29 02:51:51

标签: jquery forms button attributes

我正在尝试使用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相同,那么有没有办法使用此类名来定位特定提交按钮的启用?

(希望一切都有道理!)

6 个答案:

答案 0 :(得分:3)

准确回答你的问题:

$(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到该表单的范围。

答案 1 :(得分:1)

使用带有div或p或table cell等的包装器。下面的示例使用带有“wrapper_&lt;%= productid%&gt;”类的div在ASPX中。

呈现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>

呈现Javascript:

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

答案 2 :(得分:1)

我不确定我是否得到了你想要的东西,因此我不确定这是做你想要做的最好的方法...可能会有一些更优雅的尝试,但这里有一种方法来定位第二类'productXY'的ID:

$('.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');              
    }
});

答案 3 :(得分:1)

根据您提供的元素层次结构,最简单的方法是检查具有类buy_button的元素的兄弟姐妹并更改它:

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

    });
});

答案 4 :(得分:0)

使用您显示的html,可以想到下一个方法 例如:

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

如果标记包装在容器(div或其他)中,您可以从容器中获取id / class以查找容器中的提交按钮:

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

看看选择器。你可以用它们变得非常有创意。 http://docs.jquery.com/Selectors

答案 5 :(得分:0)

如果您真的喜欢使用第二个类名来指定您想要使用的提交按钮的ID,那么您可以这样做(我不赞同它,但如果这是什么你想做...哈哈),但是看着课程你需要高兴。

这当然是完全未经测试,大声笑......但是尝试这样的东西(这假设'产品'将始终是提交按钮的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');  
      }
   });
});