選中一個復選框時，禁用所有復選框

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腳本，那么Checkboxs會自動生成，我不知道如何管理它，因此當Checkbox被選中時，其他3個標簽會被禁用

感謝和抱歉，我的英語不好

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

在這里，我們添加了一個類equipment-disabling-checkbox來知道禁用哪個/哪個復選框。

然后，假設您希望一個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);
    }
});

在這里，我們處理“全部禁用”復選框的更改事件，並啟用/禁用其他復選框。

如果您需要其他解決方案，請更好地解釋自己。

PD：我為您做了一個小提琴： https : //jsfiddle.net/s6fe9/559/

編輯：為了正確滿足Omar的需求：

將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/

PD：我意識到HTML編輯的代碼以某種方式被破壞了。 所以我更新了它。