Change input type, from radio button to checkbox, jquery

Question

First of this is my very first jQuery script if you have any suggestions don’t be shy.

I'm trying to do the following. I have 3 columns of radio buttons. With a checkbox above. When I check one of those checkboxes the column changes from radio button to checkboxes and there can only be changed one row at the time. My script is doing all that, but I have one problem. When I change the type, all inputs get the same attribute of the first input. I think I should have some sort of loop but I have absolutely no idea how to do this.

So, my question: how can I change my script so that just the type change and not the other attributes?

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>

score 1 · Accepted Answer · answered Mar 04 '17 at 09:52

Well I didn't stop trying and finally I got it to work with .each() loops. I added a checkbox selection limitation of 2 as well. I'm new to JQuery so maybe the code isn't as clean as I would like, but it seems to work perfectly.

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

});

Change input type, from radio button to checkbox, jquery

1 Answers1