checkBoxをradio OR selectに変える方法

Question

こんにちわ。
題名にもある通り、
<input type="checkbox">を<select>か<input type="radio">に変更してほしい（一つしか選択できない状態）という修正を頂いたのですが、nameの値はそのままでやってほしいとのことなのです。

修正前は下記のコードです。

-HTML-
<label for="A"><input type="checkbox" id="A" name="test1" value="1">てすと１</label>
<label for="B"><input type="checkbox" id="B" name="test2" value="1">てすと２</label>
<label for="C"><input type="checkbox" id="C" name="test3" value="1">てすと３</label>
<label for="D"><input type="checkbox" id="D" name="test4" value="1">てすと４</label>

詳しい方よろしくお願いいたします。

Comments

[defghi1977]

>nameの値はそのままでやってほしい というのは言外に「サーバーサイドの修正を行うことなく」という意味がふくまれていますか？

[kei344]

ご自身で試されたコードを質問文に追記し、「何」が「どのように」わからないのか、コードのどの部分で詰まっているのかなどを具体的に追記されたほうが回答が望めると思います。

[defghi1977]

これってnoscript環境のことを考えているのだろうか？

Answer 1

<label for="A"><input type="radio" id="A" name="test" value="test1" /><input type="checkbox" name="test1" value="1" />てすと１</label>
<label for="B"><input type="radio" id="B" name="test" value="test2" /><input type="checkbox" name="test2" value="1" />てすと２</label>
<label for="C"><input type="radio" id="C" name="test" value="test3" /><input type="checkbox" name="test3" value="1" />てすと３</label>
<label for="D"><input type="radio" id="D" name="test" value="test4" /><input type="checkbox" name="test4" value="1" />てすと４</label>

#A+input,
#B+input,
#C+input,
#D+input {
  display: none;
}

$(document).on('change', 'input[name="test"]', function(event) {
  $('[name="test"]+input').prop('checked', false);
  $(this).next().prop('checked', this.checked);
});

Answer 2

nameの変換が微妙ですね
name=test1~4が排他的となると同じnameを当てる必要がありますが
その根拠が示されていません

$(function(){
  $('[type=checkbox]').attr({"type":"radio","name":"test"});
});

<label for="A"><input type="checkbox" id="A" name="test1" value="1">てすと１</label>
<label for="B"><input type="checkbox" id="B" name="test2" value="1">てすと２</label>
<label for="C"><input type="checkbox" id="C" name="test3" value="1">てすと３</label>
<label for="D"><input type="checkbox" id="D" name="test4" value="1">てすと４</label>