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

两件事情：

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 回答