问jquery和遍历DOM以选择适当元素时遇到的问题
EN

Stack Overflow用户

提问于 2012-04-19 10:44:42

回答 4查看 161关注 0票数 0

大家好，我的网站上有很多产品的html，

它显示了一条列有产品标题、价格、数量要求和一个名为“购买”的复选框。当前禁用了qty输入。

所以我想要做的是，如果单击了复选框，我希望将输入qty设置为1，并使其启用。

我好像在做这件事有点困难。如果有任何帮助，我现在可以有多个产品，即，将有多个表产品div在我的html页面。

我尝试过使用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.
});

javascript

jquery

html

单节点MySQL

低成本高体验，解决您的基础业务数据需求

回答 4

Stack Overflow用户

回答已采纳

发布于 2012-04-19 10:52:44

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

jQuery(document).ready(function() {
   jQuery('.add-checkbox').on('click', function() {
      jQuery(this)
         .parents('.table-products')
         .find('input.input-text')
         .val('1')
         .removeAttr('disabled');
   });
});

票数 0

Stack Overflow用户

发布于 2012-04-19 10:52:21

使用

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

问题是，一方面，您观察到单击而不是更改，所以请使用“更改”，因为它在状态更改后真正触发。

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

另一件事是输入不是..table products的直接子元素。

参见此小提琴

票数 0

Stack Overflow用户

发布于 2012-04-19 10:59:45

    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);
    });