javascript - 使用 jquery 和 php 动态禁用一些复选框选项

Question

<input type="checkbox" name="pref[]" value="red//fuji" />Fuji
<input type="checkbox" name="pref[]" value="red//pinklady" />Pink Lady
<input type="checkbox" name="pref[]" value="red//reddelicious" />Red Delicious
<input type="checkbox" name="pref[]" value="green//grannysmith" />Granny Smith
<input type="checkbox" name="pref[]" value="green//goldendelicious" />Golden Delicious

我想动态禁用复选框组，例如，如果选中任一青苹果复选框，则三个红苹果复选框将被禁用。我还希望选中的复选框即使在禁用后仍保持选中状态。

在我的真实场景中，我将从 MySQL 数据库填充复选框选项，那么如何使用 HTML、PHP 和 jQuery 或任何其他方式实现这一点？

Answer 1

给你

HTML

<input type="checkbox" name="pref[]" value="red//fuji" data-type="red" />Fuji
<br/>
<input type="checkbox" name="pref[]" value="red//pinklady" data-type="red" />Pink Lady
<br/>
<input type="checkbox" name="pref[]" value="red//reddelicious" data-type="red" />Red Delicious
<br/>
<input type="checkbox" name="pref[]" value="green//grannysmith" data-type="green" />Granny Smith
<br/>
<input type="checkbox" name="pref[]" value="green//goldendelicious" data-type="green" />Golden Delicious
<br/>

JavaScript/jQuery

$(function () {
    function disableCheckboxes(color) {
        $('input[type="checkbox"]').prop('disabled', true);
        $('*[data-type="' + color + '"]').prop('disabled', false);
    };

    function enableCheckboxes() {
        $('input[type="checkbox"]').prop('disabled', false);
    }

    $('input[type="checkbox"]').on('click', function () {
        var $this = $(this);
        var color = $this.data('type');

        var x = $('*[data-type="' + color + '"]').prop('checked');

        if ($this.is(':checked')) {
            disableCheckboxes(color);
        } else if (!$('*[data-type="' + color + '"]').prop('checked')) {
            enableCheckboxes();
        }
    });
});

示例:http://jsfiddle.net/xd9xz8vg/4/

它有点乱，但是可以通过将一些 jQuery 选择器声明为变量来清理它以提高性能。

编辑:根据评论更新了答案。