Question

有没有办法将以下功能合并为一个？

$('#box_1 input:checkbox').click(function(){
var $inputs = $('#box_1 input:checkbox')
    if($(this).is(':checked')){
       $inputs.not(this).prop('disabled',true); 
    }else{
       $inputs.prop('disabled',false);
    }
});
$('#box_2 input:checkbox').click(function(){
var $inputs = $('#box_2 input:checkbox')
    if($(this).is(':checked')){
       $inputs.not(this).prop('disabled',true); 
    }else{
       $inputs.prop('disabled',false);
    }
});

还有更多的box_id。与编写2公里代码相比，拥有更简单的解决方案会很棒

非常感谢您提前帮助

Answer 1

在所有#box_X元素上放置一个公共课程，并将其用于定位

$('.common-class').on('click', 'input:checkbox', function(){

    var $inputs = $(this).closest('.common-class').find('input:checkbox');

        if (this.checked) {
           $inputs.not(this).prop('disabled',true); 
        } else {
           $inputs.prop('disabled',false);
        }
});

Answer 2

首先在所有外框上循环

$('[id^=box_]').each(function(){    
   var $inputs=$(this).find(':checkbox').change(function(){
        $inputs.not(this).prop('disabled', this.checked);
   });
});

ID作为属性选择器有点难看，而不是使用普通类

Answer 3

为您的box ID提供一个公共课程 - 比如说“框”

$(".box :checkbox").click(function() {
    //reference the current clicked checkbox with 'this'
    //this.id will give the ID of the clicked box
    var $inputs = $(this).siblings("checkbox");
    if (this.checked) {
        $inputs.prop("disabled", true);
        //do checked
    } else {
        //not checked
        $inputs.prop("disabled", false);
    }
});

Answer 4

如果没有其他内容，您可以将其放入for loop并动态生成选择器。

for (var i=0; i<n; i++){
    $('#box_' + i + ' input:checkbox').click(function(){
    var $inputs = $('#box_' + i + ' input:checkbox')
        if($(this).is(':checked')){
           $inputs.not(this).prop('disabled',true); 
        }else{
           $inputs.prop('disabled',false);
        }
    });
}

类选择器会更优雅。

对类似的jQuery函数进行分组

4 个答案: