Question

是否可以在页面加载时将两个复选框显示为空白。但是，如果用户单击某个选项，则他们永远不能单击它 - 所以当前用户可以在选项之间切换，您只能勾选一次。但是，如果他们按两次勾选方框，则会删除勾号。

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" />

JQUERY

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

JSFIDDLE HERE http://jsfiddle.net/mRwMt/

Answer 1

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

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

FIDDLE

或避免滑动：

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

FIDDLE

Answer 2

$("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/

如果用户点击两次，如何强制使用复选框？

2 个答案: