0

大家好，我的网站上有许多产品的以下 html，

它显示一行包含产品标题、价格、想要的数量和一个名为购买的复选框。qty 输入目前被禁用。

所以我想要做的是， 如果单击复选框，我希望输入数量设置为 1，并且我希望它启用。

我似乎在这样做时遇到了一些麻烦。任何人都可以帮助现在我可以拥有多个产品，即在我的 html 页面中会有多个表格产品 div。

我曾尝试使用 jQuery 来更改细节，但我似乎无法访问某些元素。

所以基本上对于每个表格产品，我想在复选框上放置一个点击监听器，它将设置输入文本的值，即 qty 文本字段。

所以下面的页面上可能有 20 个。

<div class="table-products">
    <div class="table-top-title">
        My Spelling Workbook F
    </div>
    <div class="table-top-price">
        <div class="price-box">
            <span class="regular-price" id="product-price-1"><span class="price">€6.95</span></span>
        </div>
    </div>
    <div class="table-top-qty">
        <fieldset class="add-to-cart-box">
            <input type="hidden" name="products[]" value="1"> <legend>Add Items to Cart</legend> <span class="qty-box"><label for="qty1">Qty:</label> <input name="qty1" disabled="disabled" value="0" type="text" class="input-text qty" id="qty1" maxlength="12"></span>
        </fieldset>
    </div>
    <div class="table-top-details">
        <input type="checkbox" name="buyMe" value="buy" class="add-checkbox">
    </div>

    <div style="clear:both;"></div>
</div>

这是我尝试过的javascript

jQuery(document).ready(function() {
    console.log('hello');

    var thischeck;
    jQuery(".table-products").ready(function(e) {
        //var catTable = jQuery(this);
        var qtyInput = jQuery(this).children('.input-text');

        jQuery('.add-checkbox').click(function() {
            console.log(jQuery(this).html());
            thischeck = jQuery(this);
            if (thischeck.is(':checked'))
            {
                jQuery(qtyInput).first().val('1');
                jQuery(qtyInput).first().prop('disabled', false);
            } else {

                }

        });

    });
    // Handler for .ready() called.
});
4

4 回答 4

0

采用

jQuery('.add-checkbox').change(function() {

问题是您观察到单击而不是更改的一方面，因此请使用更改，因为它确实在状态更改后触发

var qtyInput = jQuery(this).children('.input-text');

另一件事是输入不是 .table-products 的直接子级

看到这个小提琴

于 2012-04-19T18:52:21.420 回答
0

不是最直接的方法，但这应该有效。

jQuery(document).ready(function() {
   jQuery('.add-checkbox').on('click', function() {
      jQuery(this)
         .parents('.table-products')
         .find('input.input-text')
         .val('1')
         .removeAttr('disabled');
   });
});
于 2012-04-19T18:52:44.017 回答
0 
    jQuery('input:checkbox.add-checkbox').on('change', function() {
        jQuery(this)
            .parent()
            .prev('div.table-top-qty')
            .find('fieldset input:disabled.qty')
            .val(this.checked | 0)
            .attr('disabled', !this.checked);
    });
于 2012-04-19T18:59:45.673 回答
0

这应该让您朝着正确的方向开始。基于 jQuery 1.7.2（我看到了你的 prop 调用，我猜这就是你正在使用的）。

$(document).ready(function() {

    var thischeck;
    $('.table-products').on('click', '.add-checkbox', function() {

        var qtyInput = $(this).parents('.table-products').find('.input-text');
        thischeck = $(this);
        if (thischeck.prop('checked')) {
            $(qtyInput).val('1').prop('disabled', false);
        } else {
            $(qtyInput).val('0').prop('disabled', true);
        }

    });
});

出于某种原因删除该属性往往会阻止它被重新添加。这适用于多个表。对于您的冲突，只需将 $ 替换为 jQuery。

这是小提琴：http: //jsfiddle.net/KqtS7/5/

于 2012-04-19T19:22:51.093 回答