Question

我喜欢两天与此作斗争，我希望有些人可以提供帮助

我正在使用一个生成4个复选框的PHP

<form method="post" class="car_booking_form"  >
<div class="booking-item-price-calc">
<div class="row row-wrap">
    <div class="col-md-<?php echo esc_attr($col) ?> singe_cars" data-car-id="<?php the_ID()?>">
        <?php $list = get_post_meta(get_the_ID(),'cars_equipment_list',true); ?>
        <?php
        if(!empty($list)){
            foreach($list as $k=>$v){
                $v['cars_equipment_list_price'] = apply_filters('st_apply_tax_amount',$v['cars_equipment_list_price']);

                $price_unit = isset($v['price_unit'])? $v['price_unit']: '';

                $price_unit_html='';
                switch($price_unit)
                {
                    case "per_hour":
                        $price_unit_html=__('/hour',ST_TEXTDOMAIN);
                        break;
                    case "per_day":
                        $price_unit_html=__('',ST_TEXTDOMAIN);
                        break;
                    default:
                        $price_unit_html=__('',ST_TEXTDOMAIN);
                        break;
                }
                echo '<div class="checkbox">
                        <label>
                            <input class="i-check equipment" data-price-unit="'.$price_unit.'" data-title="'.$v['title'].'" data-price="'.$v['cars_equipment_list_price'].'" type="checkbox" />'.$v['title'].'
                            <span class="pull-right">'.TravelHelper::format_money($v['cars_equipment_list_price']).''.$price_unit_html.'</span>
                        </label>
                   </div>';
            }
        }
        ?>

如果我有4个普通标签，我可以给主题ID并使用JS脚本，现在Checkbox会自动生成，我不知道如何管理它，所以当选中Checkbox时，其他3个被禁用

感谢和抱歉我的不良EN

Answer 1

尝试此操作：

$('input[type="checkbox"]').is('checked',function(e){
    e.preventDefault();
   $( "input[type='checkbox']").attr( "disabled", true);
   $(this).removeAttr('disabled');
});

Answer 2

你根本没有访问那个foreach循环吗？如果你这样做，你可以使用单选按钮尝试这些行：

echo '<div class="checkbox">
  <label>
    <input type="radio" value="' . $price_unit . '" name="price" />' . $v['title'] . '
    <span class="pull-right"></span>
  </label>
</div>';

请记住，以上只是您的精简版本，因此您可能需要添加所有数据变量。

Answer 3

使用无线电或复选框没有问题。如果你想制作一组无线电，那么你需要添加相同的名称。

由于您可以更改脚本生成的HTML，因此您可以为收音机/复选框添加名称。

如果您想使用复选框，请将生成html的脚本部分更改为：

echo '<div class="checkbox">
                    <label>
                        <input class="i-check equipment equipment-disabling-checkbox" data-price-unit="'.$price_unit.'" data-title="'.$v['title'].'" data-price="'.$v['cars_equipment_list_price'].'" type="checkbox" />'.$v['title'].'
                        <span class="pull-right">'.TravelHelper::format_money($v['cars_equipment_list_price']).''.$price_unit_html.'</span>
                    </label>
               </div>';

在此我们添加了一个设备禁用复选框类，以了解禁用哪个/哪个复选框。

然后，假设您想要一个INDEPENDENT复选框来禁用所有这些，请将其添加到foreach循环中。

// Disable all other checkboxes
echo '<div class="checkbox">
                    <label>
                        <input class="i-check equipment" type="checkbox" id="disable-equipment-checkboxes" /> Disable all
                    </label>
               </div>';

这里我们定义一个“全部禁用”复选框。

并将其添加到您的JQuery处理程序：

$(document).on("change", "#disable-equipment-checkboxes", function() {
    if ( $(this).prop('checked') ) {
        $(".equipment-disabling-checkbox").prop('disabled', true);
    } else {
        $(".equipment-disabling-checkbox").prop('disabled', false);
    }
});

此处我们处理“全部禁用”复选框的事件，并启用/禁用其他复选框。

如果您想要其他解决方案，请更好地解释自己。

P.D。：我为你做了一个小提琴：https://jsfiddle.net/s6fe9/559/

编辑：正确地满足奥马尔的需求：

将HTML回显更改为：

echo '<div class="checkbox">
                <label>
                    <input class="i-check equipment equipment-unique-checkbox" data-price-unit="'.$price_unit.'" data-title="'.$v['title'].'" data-price="'.$v['cars_equipment_list_price'].'" type="checkbox" />'.$v['title'].'
                    <span class="pull-right">'.TravelHelper::format_money($v['cars_equipment_list_price']).''.$price_unit_html.'</span>
                </label>
           </div>';

这会为所有唯一的复选框添加一个类名。

然后，将这段代码添加到您的JQuery处理程序：

$(document).on("change", ".equipment-unique-checkbox", function() {
    if ( $(this).prop('checked') ) {
        $(".equipment-unique-checkbox").prop('checked', false);
        $(this).prop('checked', true);
    } else {
        $(".equipment-unique-checkbox").prop('checked', false);
        $(this).prop('checked', false);
    }
});

在这里，我们取消选中所有这些内容，并检查所选内容。

请注意，在if条件的两个部分中都需要取消选中所有部分的重复行才能正常工作。

这里有另一个小提琴:) https://jsfiddle.net/s6fe9/561/

P.D。：我意识到HTML编辑的代码以某种方式被破坏了。所以我更新了它。

选中一个复选框后，禁用所有复选框

3 个答案: