0

こんにちは皆さん、私は私のウェブサイトの多くの製品に対して以下の html を持っています。

商品名、価格、希望数量、購入というチェックボックスを含む行が表示されます。現在、数量の入力は無効になっています。

だから私がやりたいことは 、チェックボックスがクリックされた場合、入力数量を1に設定し、それを有効にしたいということです。

私はこれを行うのに問題があるようです。これで、複数の製品を持つことができます。つまり、html ページ内に複数の table-products div があります。

jQuery を使用して詳細を変更しようとしましたが、特定の要素にアクセスできないようです。

したがって、基本的に各テーブル製品について、入力テキスト、つまり数量テキストフィールドの値を設定するチェックボックスにクリックリスナーを配置したいと思います。

そのため、以下の場合、1 ページに 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');

もう1つのことは、入力が.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 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 に答える
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 に答える