更改輸入類型，從單選按鈕複選框，jquery

Question

首先，這是我第一個jQuery腳本，如果你有任何建議不要害羞。

我正在嘗試以下操作。我有3列單選按鈕。用上面的複選框。當我檢查其中一個複選框時，該列將從單選按鈕變爲複選框，並且此時只能更改一行。我的腳本正在做所有這些，但我有一個問題。當我更改類型時，所有輸入都會獲得第一個輸入的相同屬性。我想我應該有一些循環，但我完全不知道如何做到這一點。

所以，我的問題：我如何改變我的腳本，以便只改變類型而不改變其他屬性？

https://jsfiddle.net/bjc3a9y7/1/

$('input[name="switch"]').change(function() { 
 
var checked = $(this).is(':checked'); 
 
$('input[name="switch"]').prop('checked',false); 
 

 
var brandType = $('input[name="brand"]').prop("type"); 
 
var fuelType = $('input[name="fuel"]').prop("type"); 
 
var bodyType = $('input[name="body"]').prop("type"); 
 

 
if (brandType == 'checkbox') { 
 
    var oldInput = $('input[name="brand"]'); 
 
    $('input[name="brand"]').replaceWith(
 
     $('<input type="radio" />'). 
 
     attr("value", oldInput.attr("value")). 
 
     attr("name", oldInput.attr("name")). 
 
     attr("id", oldInput.attr("id")) 
 
    ) 
 
} else if (fuelType == 'checkbox') { 
 
    var oldInput = $('input[name="fuel"]'); 
 
    $('input[name="fuel"]').replaceWith(
 
     $('<input type="radio" />'). 
 
     attr("value", oldInput.attr("value")). 
 
     attr("name", oldInput.attr("name")). 
 
     attr("id", oldInput.attr("id")) 
 
    ) 
 
} else if (bodyType == 'checkbox') { 
 
    var oldInput = $('input[name="body"]'); 
 
    $('input[name="body"]').replaceWith(
 
     $('<input type="radio" />'). 
 
     attr("value", oldInput.attr("value")). 
 
     attr("name", oldInput.attr("name")). 
 
     attr("id", oldInput.attr("id")) 
 
    ) 
 
}; 
 

 
if(checked) { 
 
    $(this).prop('checked',true); 
 

 
    var id = $(this).attr("id"); 
 
    var oldInput = $('input[name="' + id + '"]'); 
 
    $('input[name="' + id + '"]').replaceWith(
 
     $('<input type="checkbox" />'). 
 
      attr("value", oldInput.attr("value")). 
 
      attr("name", oldInput.attr("name")). 
 
      attr("id", oldInput.attr("id")) 
 
    ) 
 
}; 
 

 
});

#container { 
 
    display: flex; 
 
    flex-direction: row; 
 
} 
 

 
.filter { 
 
    width: 150px; 
 
    display: flex; 
 
    flex-direction: column; 
 
}

<script src="https://code.jquery.com/jquery-1.10.2.js"></script> 
 
<div id='container'> 
 
    <div class='filter'> 
 
    <header> 
 
     Brand <input type='checkbox' id='brand' name='switch' class='switch'> 
 
    </header> 
 
    <div id='brand'> 
 
     <div class='filter-item'> 
 
     <span><input type='radio' id='mercedes' name='brand' value='mercedes'></span> 
 
     <label for='mercedes'><span></span>Mercedes-benz</label> 
 
     </div> 
 
     <div class='filter-item'> 
 
     <input type='radio' id='bmw' name='brand' class='brand' value='bmw'> 
 
     <label for='bmw'><span></span>BMW</label> 
 
     </div> 
 
     <div class='filter-item'> 
 
     <input type='radio' id='audi' name='brand' class='brand' value='audi'> 
 
     <label for='audi'><span></span>Audi</label> 
 
     </div> 
 
     <div class='filter-item'> 
 
     <input type='radio' id='ford' name='brand' class='brand' value='ford'> 
 
     <label for='ford'><span></span>Ford</label> 
 
     </div> 
 
     <div class='filter-item'> 
 
     <input type='radio' id='dodge' name='brand' class='brand' value='dodge'> 
 
     <label for='dodge'><span></span>Dodge</label> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class='filter'> 
 
    <header> 
 
     Fuel <input type='checkbox' id='fuel' name='switch' class='switch'> 
 
    </header> 
 
    <div class='filter-item'> 
 
     <input type='radio' id='diesel' name='fuel' class='fuel' value='diesel'> 
 
     <label for='diesel'><span></span>Diesel</label> 
 
    </div> 
 
    <div class='filter-item'> 
 
     <input type='radio' id='gasoline' name='fuel' class='fuel' value='gasoline'> 
 
     <label for='gasoline'><span></span>Gasoline</label> 
 
    </div> 
 
    <div class='filter-item'> 
 
     <input type='radio' id='electric' name='fuel' class='fuel' value='electric'> 
 
     <label for='electric'><span></span>Electric</label> 
 
    </div> 
 
    <div class='filter-item'> 
 
     <input type='radio' id='other' name='fuel' class='fuel' value='other'> 
 
     <label for='other'><span></span>Other</label> 
 
    </div> 
 
    </div> 
 
    <div class='filter'> 
 
    <header> 
 
     Body <input type='checkbox' id='body' name='switch' class='switch'> 
 
    </header> 
 
    <div class='filter-item'> 
 
     <input type='radio' id='convertible' name='body' class='body' value='convertible'> 
 
     <label for='convertible'><span></span>Convertible</label> 
 
    </div> 
 
    <div class='filter-item'> 
 
     <input type='radio' id='coupe' name='body' class='body' value='coupe'> 
 
     <label for='coupe'><span></span>Coupe</label> 
 
    </div> 
 
    <div class='filter-item'> 
 
     <input type='radio' id='sedan' name='body' class='body' value='sedan'> 
 
     <label for='sedan'><span></span>Sedan</label> 
 
    </div> 
 
    <div class='filter-item'> 
 
     <input type='radio' id='station' name='body' class='body' value='station'> 
 
     <label for='station'><span></span>Station wagon</label> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

嗯，我並沒有停止努力，最後我得到了它與.each()循環工作。我也添加了2的複選框選擇限制。我是JQuery的新手，所以也許代碼並不像我想的那麼幹淨，但它看起來很完美。

https://jsfiddle.net/bjc3a9y7/2/

$('input[name="switch"]').change(function() { 
var checked = $(this).is(':checked'); 
$('input[name="switch"]').prop('checked',false); 

var arr = ["brand", "fuel", "body"]; 

$.each(arr, function(i, val) { 
    var type = $('input[name="' + val + '"]').prop("type"); 

    if (type == 'checkbox') { 
     $('input[name="' + val + '"]').each(function(index, value){ 
      var oldInput = $(value); 
      if(index == 0){ 
       $(value).replaceWith(
        $('<input type="radio" />'). 
        prop("value", oldInput.prop("value")). 
        prop("name", oldInput.prop("name")). 
        prop("id", oldInput.prop("id")). 
        prop('checked',true) 
       ) 
      } else { 
       $(value).replaceWith(
        $('<input type="radio" />'). 
        prop("value", oldInput.prop("value")). 
        prop("name", oldInput.prop("name")). 
        prop("id", oldInput.prop("id")) 
       ) 
      } 
     }); 
    }; 
}); 

if(checked) { 
    $(this).prop('checked',true); 
    var id = $(this).prop("id");       
    $('input[name="' + id + '"]').each(function(index, value){ 
     var oldInput = $(value); 

     var checked2 = $(value).is(':checked'); 
     if(checked2) { 
      $(value).replaceWith(
       $('<input type="checkbox" />'). 
       prop("value", oldInput.prop("value")). 
       prop("name", oldInput.prop("name")). 
       prop("id", oldInput.prop("id")). 
       prop('checked',true) 
      ) 
     }else{ 
      $(value).replaceWith(
       $('<input type="checkbox" />'). 
       prop("value", oldInput.prop("value")). 
       prop("name", oldInput.prop("name")). 
       prop("id", oldInput.prop("id")) 
      ) 
     } 
    }); 

    // limit selection checkboxes 
    $('input[name="' + id + '"]').change(function(){ 
     var max= 2; 
     if($('input[name="' + id + '"]:checked').length == max){ 
      $('input[name="' + id + '"]').prop('disabled', 'disabled'); 
      $('input[name="' + id + '"]:checked').removeProp('disabled'); 
     }else{ 
      $('input[name="' + id + '"]').removeProp('disabled'); 
     } 
    }); 
} 

}）;