動的に作ったチェックボックスが選択できません！！

質問

こんにちは
閲覧ありがとうございます。

タイトルの通り、HTMLのcheckboxをjQuery/javascriptで動的に作ったのですが、動かなくて困っています。
単純に一つ一つcreateElement()で作った場合は大丈夫なのですが、作りたいものが入れ子になった状態です。
まず、作りたいものをHTMLで書くと以下になります。

<div class="input-checkbox">
<span class="kintoneplugin-input-checkbox-item">
<input type="checkbox" name="checkbox" value="value*****" id="id*****">
<label for="id*****">チェックボックス１</label>
</span>
</div>

そして、次にこの形を動的に作ろうとしたものが以下です。
上のHTMLの<div class="input-checkbox">はあるという前提で、その子に動的に作った要素を入れようとしています。
arrayとあるのは、この内容をfor文で回すためです。
//1.span要素作成
var checkSpan = document.createElement('span');
checkSpan.className = "input-checkbox-item";
//2.checkbox作成
var viewCheckBox = document.createElement('input');
viewCheckBox.type = "checkbox";
viewCheckBox.name = "checkbox";
viewCheckBox.id = array2[k];
viewCheckBox.value = array2[k];
viewCheckBox.disabled="";
//3.ラベル作成
var viewLabel = document.createElement("label");
viewLabel.for = array2[k];
viewLabel.id = "label_"+k;
viewLabel.innerHTML = array[k];
4.//追加
$('.input-checkbox').append($(checkSpan).append(viewCheckBox).append(viewLabel));

上記の内容で実行すると、チェックボックスとそのラベルは表示されるのですが、チェックボックスが編集不可というか、、チェックできないのです。
disabledの指定などもしてみたのですが、うまくいきませんでした。
どうやったらチェックをできるようになるでしょうか＞＜
プログラミング初心者なので、変なところとかがあったらすいません。。。

よろしくお願いします！！

回答No.1

1050 円（@1050YEN）

原因は、ソースからはよくわからなかったので、代用できそうなソースを書いておきます。
すべてjQueryで書いた場合の例です。

以下のサンプルには全角スペースが利用されています。
コピペする場合には、全角スペース1個につき、半角スペース2個に置換して利用してください。

<script type="text/javascript">

　　// ラベル内のinnerHTML群の配列
　　var aryHtml = ["<b>123</b>", "<b>abcd</b>", "<b>いろはに</b>"];

　　// 追加する先
　　var divRoot = $("div:first")

　　// 要素数でループ
　　$(aryHtml).each(function (i) {
　　　　// --------------------
　　　　// 1.span要素作成
　　　　// --------------------
　　　　var checkSpan = $("<span/>");
　　　　// CLASS設定
　　　　checkSpan.addClass("input-checkbox-item");
　　　　// 追加先にSPANを追加
　　　　divRoot.append(checkSpan);

　　　　// --------------------
　　　　// 2.checkbox作成
　　　　// --------------------
　　　　var viewCheckBox = $("<input/>");
　　　　// 属性設定(type / id)
　　　　viewCheckBox.attr({
　　　　　　type: "checkbox",
　　　　　　id: "chk" + i
　　　　});
　　　　// SPANにCHECKBOXを追加
　　　　checkSpan.append(viewCheckBox);

　　　　// --------------------
　　　　// 3.ラベル作成
　　　　// --------------------
　　　　var viewLabel = $("<label/>");
　　　　// 属性設定(for)
　　　　viewLabel.prop("for", viewCheckBox.attr("id"));
　　　　// innerHTMLを設定
　　　　viewLabel.html(this);
　　　　//viewLabel.html(aryHtml[i]); // innerHTMLを設定はこの書き方でも良い
　　　　// SPANにLABELを追加
　　　　checkSpan.append(viewLabel);
　　});

</script>