Ändern Sie den Eingabetyp, von Radiobutton zu Kontrollkästchen, jquery

Question

Zuerst ist dies mein allererstes jQuery-Skript, wenn Sie irgendwelche Vorschläge haben, seien Sie nicht schüchtern.

Ich versuche, Folgendes zu tun. Ich habe 3 Spalten von Radio-Buttons. Mit einem Kontrollkästchen oben. Wenn ich eines dieser Kontrollkästchen ankreuze, ändert sich die Spalte von Optionsfeld zu Kontrollkästchen, und es kann nur jeweils eine Zeile geändert werden. Mein Skript macht das alles, aber ich habe ein Problem. Wenn ich den Typ ändere, erhalten alle Eingaben das gleiche Attribut der ersten Eingabe. Ich denke, ich sollte eine Art Loop haben, aber ich habe absolut keine Ahnung, wie ich das machen soll.

Also, meine Frage: Wie kann ich mein Skript ändern, so dass nur der Typ ändern und nicht die anderen Attribute?

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

Nun, ich nicht aufhören zu versuchen, und schließlich bekam ich es mit .each() Schleifen zu arbeiten. Ich habe auch eine Checkbox-Auswahlbeschränkung von 2 hinzugefügt. Ich bin neu bei JQuery, also ist der Code vielleicht nicht so sauber wie ich es möchte, aber es scheint perfekt zu funktionieren.

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

});