라디오 버튼에서 jquery로 입력 유형을 변경하십시오.

Question

첫 번째는 내 제안 된 첫 번째 jQuery 스크립트입니다.

다음 작업을 수행하려고합니다. 3 열의 라디오 버튼이 있습니다. 위의 확인란. 이 체크 박스 중 하나를 체크하면 열은 라디오 버튼에서 체크 박스로 바뀌며 그 때 한 행만 변경할 수 있습니다. 내 스크립트는 모든 것을하고 있지만 한 가지 문제가 있습니다. 유형을 변경하면 모든 입력이 첫 번째 입력과 동일한 속성을 갖습니다. 나는 어떤 종류의 루프를 가져야한다고 생각하지만, 어떻게 해야할지 전혀 모른다.

그래서 내 질문 : 형식을 변경하고 다른 특성이 없도록 스크립트를 어떻게 변경합니까?

$('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>

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

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

});