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

Question

im like two days fighting against this, and i wish some1 can help

im using a PHP that generats 4 checkboxes

<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>';
            }
        }
        ?>

if i hade 4 normal labels i could give theme Ids and use a JS script, now the Checkboxs gets generated automatically and i dont know how to manage it so when a Checkbox is checked the other 3 gets disabled

thanks and sorry for my bad EN

Answer 1

There is no problem with the use of radios or checkboxes. If you want to make a group of radios, then you need to add them the same NAME.

Since you can change the HTML generated by your script, then you can add a name to your radio/checkbox.

If you want to make it with checkboxes, then change the part of your script that generates the html to this:

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>';

Here we add a class equipment-disabling-checkbox to know what/which checkbox disable.

Then, supposing that you want an INDEPENDENT checkbox to disable all of them, add it out of your foreach loop.

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

Here we define a "disable all" checkbox.

and add this to your JQuery handlers:

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

And here we handle the change event of the "disable all" checkbox and enable/disable the other checkboxes.

If you want another solution, explain yourself better please.

P.D.: I made a fiddle for you: https://jsfiddle.net/s6fe9/559/

EDIT: To cover the needs of Omar properly:

Change the HTML echo to this:

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>';

This will add a class name to all the unique checkboxes.

Then, add this piece of code to your JQuery handlers:

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

And here we uncheck all of them, and check the selected one.

Notice that the repeated line that unchecks all of them is needed in both parts of the if condition to work properly.

Here you have another fiddle :) https://jsfiddle.net/s6fe9/561/

P.D.: I realized that the code for the HTML edit were broken somehow. So I updated it.