Question

我有一些我编写过的脚本，它的工作方式也完全符合我的要求，但它的作用似乎相当冗长：http://jsfiddle.net/x6xbymmL/

$(".class2").prop("disabled", true);
$(".class3").prop("disabled", true);

$('input[class^="class"]').click(function() {
var $this = $(this);

if ($this.is(".class1")) {
    if ($(".class1:checked").length > 0) {
        $(".class1").prop("disabled", true);
        $(".class2").prop("disabled", false);
        $(".class3").prop("disabled", false);
    } else {
        $(".class1").prop("disabled", false);
        $(".class2").prop("disabled", true);
        $(".class3").prop("disabled", true);
    }
}

if ($this.is(".class2")) {
    if ($(".class2:checked").length > 0) {
        $(".class1").prop("disabled", true);
        $(".class2").prop("disabled", false);
        $(".class3").prop("disabled", true);
    } else {
        $(".class1").prop("disabled", true);
        $(".class2").prop("disabled", false);
        $(".class3").prop("disabled", false);
    }
}

if ($this.is(".class2")) {
    if ($(".class2:checked").length > 1) {
        $(".class1").prop("disabled", true);
        $(".class2").prop("disabled", true);
        $(".class3").prop("disabled", true);
    } else {
        $(".class1").prop("disabled", true);
        $(".class2").prop("disabled", false);
        $(".class3").prop("disabled", true);
    }
}

if ($this.is(".class3")) {
    if ($(".class3:checked").length > 0) {
        $(".class1").prop("disabled", true);
        $(".class2").prop("disabled", true);
        $(".class3").prop("disabled", true);
    } else {
        $(".class1").prop("disabled", true);
        $(".class2").prop("disabled", false);
        $(".class3").prop("disabled", true);
    }
}

}）;

我想弄清楚我是否已经尽力而为或者有更好的方法？另外一个非常好的方法是禁用组中的所有其他组，除了已选中的组，以便用户可以返回，如果他们检查了错误的选项...我真的很难让这个工作：/

Answer 1

这是一个明显更短的代码版本，具有完全相同的功能。看到它在这里工作：http://jsfiddle.net/x6xbymmL/1/

$(".class2, .class3").prop("disabled", true);
$('input[class^="class"]').click(function () {
    if ($(".class1:checked").length > 0) {
        $(".class1").prop("disabled", true);
        $(".class2, .class3").prop("disabled", false);
    }
    if ($(".class2:checked").length > 0 || $(".class3:checked").length === 1) {
        $(".class3").prop("disabled", true);
    }
    if ($(".class3:checked").length === 1 || $(".class2:checked").length === 2) {
        $(".class3, .class2").prop("disabled", true);
    }
});

你真的有太多的if语句在那里你想要完成的事情。它工作正常，你很彻底，但大部分都是不必要的。

jQuery：禁用道具IF检查

1 个答案: