0

「チェックアウトを続ける」リンクの前の最後に「ここをクリックして利用規約に同意する」チェックボックスがあるフォームがあります。

jQuery を使用して、チェックボックスがチェックされていないときに「ショッピングを続ける」リンクの href 属性を削除したいと考えています。ユーザーがチェックボックスを選択すると、href 属性がリンクに追加されます。

私が使用しているコードは以下のとおりですが、これは何らかの理由で機能していません。

jQuery(document).ready(function() {

if ($('input#tandc').is(':checked')) {
    jQuery("#continue_shopping").attr("href");
}
else
    jQuery("#continue_shopping").removeAttr("href").css({"opacity" : "0.3", "cursor":"default"});
    });

私のhtmlマークアップは次のようなものです:

<input type="checkbox" name="tandc" value="tandc" id="tandc" required>
    I accept the <a href="/terms-and-conditions">Terms and Conditions</a>
</input>
<a id="continue_shopping" href="/store/shopping-cart/shipping/">Continue Shopping</a>
4

5 に答える 5

3

これを試して。最初に無効に設定する必要がありcontinue shoppingます。論理的に正しい？

$(function(){
// should be disabled first, shouldnot it be?
$("#continue_shopping").removeAttr("href").css({"opacity" : "0.3", "cursor":"default"});
 $('#tandc').change(function() {
    if($(this).prop('checked')) {
        $("#continue_shopping").attr('href', '/store/shopping-cart/shipping/');
    } else {
        $("#continue_shopping").removeAttr("href").css({"opacity" : "0.3",  "cursor":"default"});
    }
  });
 });

デモ: 作業バージョン

于 2013-04-12T07:50:57.837 に答える
1

2つのこと：

1 -prop()メソッドを使用します。

$('#tandc').change(function() {
    if($(this).prop('checked')) {
        $("#continue_shopping").attr('href', '/store/shopping-cart/shipping/');
    } else {
        $("#continue_shopping").removeAttr("href").css({"opacity" : "0.3",  "cursor":"default"});
    }
  });

2 - ラベルを使用して、ユーザーがボックスを明示的にクリックする必要がないようにします。

<input type="checkbox" name="tandc" value="tandc" id="tandc" required>
<label for="tandc">I accept the <a href="/terms-and-conditions">Terms and Conditions</a></label>

</input>
<a id="continue_shopping" href="#">Continue Shopping</a>

jsFiddle : http://jsfiddle.net/hescano/8narS

于 2013-04-12T07:58:07.300 に答える
0

そのコードはあなたが望むものですか？

$(document).ready(function() {
    $('#tandc').on('click', function() {
        if ($(this).is(':checked')) {
            $("#continue_shopping").attr('href', '/store/shopping-cart/shipping/');
        } else {
            $("#continue_shopping").removeAttr("href").css({"opacity" : "0.3", "cursor":"default"});
        }
    });
});
于 2013-04-12T07:49:20.707 に答える
0

これを試してください: DEMO

http://jsfiddle.net/7kakv/

jQuery(document).ready(function() {

$('#tandc').on('click', function() {
        if ($(this).is(':checked')) {
            $("#continue_shopping").attr('href', '/store/shopping-cart/shipping/').css({"opacity" : "1"});
        } else {
            $("#continue_shopping").removeAttr("href").css({"opacity" : "0.3", "cursor":"default"});
        }
      });
    });
于 2013-04-12T07:51:54.597 に答える
0

チェックボックスがチェックされていない場合、これは href を空白として設定します。 

if ($('input#tandc').is(':checked') == false) {
    jQuery("#continue_shopping").attr("href","");   
});
于 2013-04-12T07:52:52.787 に答える