Question

我在“继续结帐”链接之前的结尾处有一个“点击此处接受条款和条件”复选框。

使用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>

Answer 1

试试这个。你应该首先设置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"});
    }
  });
 });

DEMO： working version

Answer 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

Answer 3

该代码是否符合您的要求？

$(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"});
        }
    });
});

Answer 4

试试这个： <强>样本

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

Answer 5

如果未选中复选框，则会将href设置为空白。

if ($('input#tandc').is(':checked') == false) {
    jQuery("#continue_shopping").attr("href","");   
});

jQuery - 未选中复选框时删除href属性

5 个答案: