如果用户单击复选框两次，如何强制执行该复选框

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在这里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...
});

Fiddle：http://jsfiddle.net/maniator/mRwMt/2/

---

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