Javascript 使用jquery和php动态禁用某些复选框选项 富士 红粉佳人 鲜红可口 史密斯奶奶 金冠

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

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

尝试-

<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

富士 红粉佳人 鲜红可口 史密斯奶奶 金冠 $（文档）.ready（函数（）{ $（'input[type=“checkbox”]”）。在（'click'，function（）上{ $（'.green'）。每个（函数（）{ 如果（$（this）.is（':checked'））{ $（'.red'）。每个（函数（）{ //$（this.prop（'disabled'，true）； $（this.attr（'disabled'，true）； }) } }) }) }) 给你

HTML

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

$(document).ready(function() {
   $('input[type="checkbox"]').on('click', function(){
     $('.green').each(function() {
        if ($(this).is(':checked')) {
           $('.red').each(function() {
              //$(this).prop('disabled', true);
              $(this).attr('disabled', true);
           })
        }
     })
   })
})

示例：

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

---

编辑：根据评论更新答案

希望下面的代码能够帮助您使用

PHP

，它将从服务器/DB中填充数据，就像处理任何客户端/用户交互的

Jquery

一样

使用PHP禁用

$(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();
        }
    });
});

使用Javascript禁用

<?php
$selected_fruit = 'red//pinklady'; // this is got from DB
$selected_group = explode('//', $selected_fruit);
$checkbox_options = '';

// following variable $array_of_checkbox_option as you say should be from DB
$array_of_checkbox_option = array(
array('val'=>'red//fuji', 'display_text'=>'Fuji'),
array('val'=>'red//pinklady', 'display_text'=>'Pink Lady'),
array('val'=>'red//reddelicious', 'display_text'=>'Red Delicious'),
array('val'=>'green//grannysmith', 'display_text'=>'Granny Smith'),
array('val'=>'green//goldendelicious', 'display_text'=>'Golden Delicious')
);
foreach($array_of_checkbox_option as $value){
    $group_name = explode('//', $value['val']);
    $checkbox_options .= '<input type="checkbox" name="pref[]" value="';
    $checkbox_options .= $value['val'].'"';
    $checkbox_options .= ($selected_fruit == $value['val']) ? ' checked ' : '';
    $checkbox_options .= ($group_name[0] == $selected_group[0]) ? ' disabled ' : '';
    $checkbox_options .= '/>'.$value['display_text'].'<br>';
}

echo $checkbox_options;
?>

$（文档）.ready（函数（）{
$（“输入[name^='pref']”）。在（'click'，function（）上{
如果（$（this）.is（':checked'））{
var group_name=$（this.val（）.split（'/'）；
var sel_group=组名称[0]；
$（“输入[name^='pref']”）。每个（函数（）{
var elm_name=$（this.val（）.split（'/'）；
if（sel_group==elm_name[0]）{
$（this.prop（'disabled'，true）；
}
});
}
});
});

您可以添加另一个html字段disabled=”“它不会禁用任何选项：（抱歉，仍然不会禁用任何选项。谢谢这项功能，但是除了使用class（首选值）选择要禁用的复选框之外，还有其他方法吗？确定您可以使用HTML5的自定义数据属性来存储颜色。我更新了答案

<?php
$selected_fruit = 'red//pinklady'; // this is got from DB
$selected_group = explode('//', $selected_fruit);
$checkbox_options = '';

// following variable $array_of_checkbox_option as you say should be from DB
$array_of_checkbox_option = array(
array('val'=>'red//fuji', 'display_text'=>'Fuji'),
array('val'=>'red//pinklady', 'display_text'=>'Pink Lady'),
array('val'=>'red//reddelicious', 'display_text'=>'Red Delicious'),
array('val'=>'green//grannysmith', 'display_text'=>'Granny Smith'),
array('val'=>'green//goldendelicious', 'display_text'=>'Golden Delicious')
);
foreach($array_of_checkbox_option as $value){
    $group_name = explode('//', $value['val']);
    $checkbox_options .= '<input type="checkbox" name="pref[]" value="';
    $checkbox_options .= $value['val'].'"';
    $checkbox_options .= ($selected_fruit == $value['val']) ? ' checked ' : '';
    $checkbox_options .= ($group_name[0] == $selected_group[0]) ? ' disabled ' : '';
    $checkbox_options .= '/>'.$value['display_text'].'<br>';
}

echo $checkbox_options;
?>

<script>
$(document).ready(function() {
    $( "input[name^='pref']" ).on('click', function(){
        if($(this).is(':checked')){
            var group_name = $(this).val().split('//');
            var sel_group = group_name[0];
            $( "input[name^='pref']" ).each(function(){
                var elm_name = $(this).val().split('//');
                if(sel_group == elm_name[0]){
                    $(this).prop('disabled', true);
                }
            });
        }
    });
});
</script>