4 
​<form>
    <label for="1">Text 1</label>
        <input type="checkbox" name="1" value="something1" id="1"><br>
    <label for="2">Text 2</label>
        <input type="checkbox" name="2" value="something2" id="2"><br>
    <label for="3">Text 3</label>
        <input type="checkbox" name="3" value="something3" id="3"><br>
    <label for="4">Text 4</label>
        <input type="checkbox" name="4" value="something4" id="4">
</form>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

这些是复选框，我试图在互联网上搜索并没有找到任何东西。

我想允许用户检查 id 3 和 4但 如果他检查 1 ，则 2 不可检查，或者如果他检查 2 则 1 不可检查。并为不可用添加一个类..命名.. grade-out{ color: #DDD;}

希望你明白这个问题。提前致谢 ！！

4

5 回答 5

1

我会data-groupid在您的复选框中添加属性以识别它们属于哪个组。然后向属于组的复选框添加一个单击处理程序，这将在选中时禁用同一组中的所有其他复选框，并在未选中时启用它们。

假设您的标记是一致的并且标签始终是各个复选框的前身，您可以使用该prev()方法轻松定位它们。

$('input:checkbox[data-group]').click(function() {

    var groupid = $(this).data('group');
    var checked = $(this).is(':checked');

    if(checked) {

        $('input:checkbox[data-group=' + groupid + ']').not($(this))
           .attr('disabled', 'disabled')
           .prev().addClass('grade-out');

    } else {

        $('input:checkbox[data-group=' + groupid + ']')
           .removeAttr('disabled')
           .prev().removeClass('grade-out');

    }

});

演示

于 2012-09-07T08:09:04.423 回答
0

您可以使用单选表单输入。无论如何，如果必须使用复选框，那么您可以使用一些 javascript（例如，使用 jQuery）

$('#1,#2').click(function(){
    var $this = $(this);
    var theOtherId = $this.attr('id') == 1 ? 2 : 1;
    var theOtherOne = $('#'+theOtherId);
    if( $this.is(':checked') ) theOtherOne.attr('checked',false);
});

这是你要找的吗？

重新设计的示例：演示小提琴

$('#1,#2').click(function(){
    var $this = $(this);
    var theOtherId = $this.attr('id') == 1 ? 2 : 1;
    var theOtherOne = $('#'+theOtherId);
    if( $this.is(':checked') ) theOtherOne.attr('disabled',true);
    else theOtherOne.attr('disabled',false);
});
于 2012-09-07T08:05:01.710 回答
0

我会分配一个属性data-disable来禁用某些元素并检查onchange.

我会这样做：

<form>
    <label for="1">Text 1</label>
        <input type="checkbox" name="1" value="something1" id="1" data-disable="2,3"><br>
    <label for="2">Text 2</label>
        <input type="checkbox" name="2" value="something2" id="2" data-disable="1"><br>
    <label for="3">Text 3</label>
        <input type="checkbox" name="3" value="something3" id="3"><br>
    <label for="4">Text 4</label>
        <input type="checkbox" name="4" value="something4" id="4">
</form>​​​

和脚本：

$('input:checkbox​​​​​​​​​​​​​​​​​​')​.on('change', function(){
    var toUncheck = $(this).attr('data-disable');
    var self = $(this);
        $.each(toUncheck.split(','), function(el, val){
            if(self.attr('checked') == 'checked'){
                $('#'+val).attr('disabled', 'disabled');
            } else {
                $('#'+val).removeAttr('disabled');
            }
        });
});​

JSFiddle 演示

于 2012-09-07T08:11:27.693 回答
0

  1. 用于$("#element_id").hide();禁用复选框

  2. 用于$("#element_id").attr("checked", true);检查复选框是否被选中

  3. 用于$("#element_id").addclass();向元素添加类，因此只需搜索 jQuery 选择器，您就会找到解决方案

更多信息请访问http://api.jquery.com/category/selectors/我希望我帮助照顾

于 2012-09-07T08:14:42.790 回答
0

虽然上面有更复杂和灵活的解决方案，但如果您希望获得可靠但清晰的使用示例，请查看此。使用 id 让事情变得更容易。

http://jsfiddle.net/erdincgc/uMhbs/1/

HTML（添加类和 id）；

<form>
    <label for="1">Text 1</label>
        <input class="checks" type="checkbox"  id="option1"   name="option1"  value="something1" id="1"><br>
    <label for="2">Text 2</label>
        <input class="checks" type="checkbox"  id="option2"   name="option2" value="something2" id="2"><br>
    <label for="3">Text 3</label>
        <input class="checks" type="checkbox"  id="option3"   name="option3" value="something3" id="3"><br>
    <label for="4">Text 4</label>
        <input class="checks" type="checkbox"  id="option4"   name="option4" value="something4" id="4">
</form>

和 JS

$('.checks').click(function(){
   op1 = $('#option1') ; 
   op2 = $('#option2') ;
   this_id = $(this).attr("id") ;
   this_state = $(this).attr("checked");

if(this_id =="option1"){
    if( this_state == "checked" ){
        op2.attr("disabled",true);            
    }
    else {
        op2.attr("disabled",false);
    }
    op2.prev().toggleClass('disabled'); 
} 

if(this_id=="option2"){
    if( this_state=="checked" ) 
        op1.attr("disabled",true); 
    else {
            op1.attr("disabled",false);
        }
        op1.prev().toggleClass('disabled');  
    }
});
于 2012-09-07T09:10:41.710 回答