1

是否可以在页面加载时让两个复选框显示为空白。但是，如果用户单击一个选项，那么他们永远无法单击它-因此目前用户可以在选项之间切换，而您只能打勾一次。但是，如果他们按两次勾选的框，则会删除勾选。

HTML

My Billing Address is the same <input type="checkbox" class="sameCheck" name="toggleOracleAddress" id="toggleOracleAddress" value="SAME" /> <br /> <br />
My Billing Address is the different <input type="checkbox" class="sameDifferent" name="toggleOracleAddress" id="toggleOracleAddress" value="DIFFERENT" />

查询

$(document).ready(function(){
    //////////////////
    //####     SAME ADDRESS
    //////////////////
    $('.sameCheck').click(function() {
        $('.sameDifferent').removeAttr('checked');
        $('#proceedIsOn').slideUp();
    });
    //////////////////
    //####     DIFFERENT ADDRESS
    //////////////////
    $('.sameDifferent').click(function() {
        $('.sameCheck').removeAttr('checked');
        $('#proceedIsOn').slideDown();    
    });
});

JSFIDDLE 在这里http://jsfiddle.net/mRwMt/

4

2 回答 2

3

只需将其设置为在每次点击时检查：

$(document).ready(function(){
    $('.sameCheck').click(function() {
        this.checked = true;
        $('#proceedIsOn').slideUp();
    });
    $('.sameDifferent').click(function() {
        this.checked = true;
        $('#proceedIsOn').slideDown();    
    });
});​

小提琴

或避免滑动：

$(document).ready(function(){
    $('.sameCheck').click(function() {
        if (!this.checked) return false;
        $('#proceedIsOn').slideUp();
    });
    $('.sameDifferent').click(function() {
        if (!this.checked) return false;
        $('#proceedIsOn').slideDown();    
    });
});​

或者只是在框之间切换：

$(document).ready(function(){
    $('.sameCheck').click(function() {
        if (this.checked) {
            $(this).siblings('input[type"text"]').prop('checked', false);
            $('#proceedIsOn').slideUp();
        }else{
            return false;
        }
    });
    $('.sameDifferent').click(function() {
        if (this.checked) {
            $(this).siblings('input[type"text"]').prop('checked', false);
            $('#proceedIsOn').slideDown();
        }else{
            return false;
        }
    });
});​

小提琴

于 2012-08-06T13:55:31.203 回答
0 
$("input:checkbox").change(function(){

     var otherBox = $("input:checkbox").not(this);

     if($(this).is(":checked"))  otherBox.hide();
     else   otherBox.show();

     //rest of your code...

});

小提琴：http: //jsfiddle.net/maniator/mRwMt/2/

隐藏整行的更高级的小提琴：http: //jsfiddle.net/maniator/mRwMt/3/

于 2012-08-06T13:56:24.263 回答