画像の上にチェックボックスを重ねて表示＋クリックで外枠に枠線

Question

画像の選択画面を作る際に、画像の上にチェックボタンを重ね
クリックすればチェックが入り、なおかつ枠線が入る仕様にしたいです。

下記サイトを参考に作りました。
https://remotestance.com/blog/2809/

ただ、結果的にやりたかったことは
画像の外枠に枠線をつけたいということです。
現状、画像に枠がつく状態です。これを外枠に枠がつくようにしたいです。

<ul class="image_list">
  <li>
    <div class="image_box">
      <img class="thumbnail" src="./img/mg_01.png" alt="foo" />
　　<input class="disabled_checkbox" type="checkbox" checked />
    </div>
  </li>
</ul>

ul.image_list li {
	display: inline-block;
  }
  ul.image_list li .image_box {
	width: 140px;
	height: 160px;
	background: #ffffff;
	text-align: center;
	position: relative;
  }
  .image_box img.thumbnail {
	width: 95px;
	padding-top: 12px;
  }
  .image_box img.thumbnail.checked {
	border: 1px solid #BC3500;
  }
  .image_box .disabled_checkbox {
	position: absolute;
	bottom: 0;
	left: 0;
	display: none;
	transform: scale(2);
	cursor: pointer;
  }
  .image_box img.thumbnail.checked + .disabled_checkbox {
	display: block;
  }

$(function() {
  // チェックボックスのクリックを無効化します。
  $('.image_box .disabled_checkbox').click(function() {
    return false;
  });

  // 画像がクリックされた時の処理です。
  $('img.thumbnail').click(function() {
    var $imageList = $('.image_list');

    // 現在の選択を解除します。
    $imageList.find('img.thumbnail.checked').removeClass('checked');

    // チェックを入れた状態にします。
    $(this).addClass('checked');
  });
});

もし、わかる方がいたらご教授いただけると幸いです。
よろしくお願いいたします。

Answer 1

HTMLの構造は変えてはいけないのでしょうか？

<style>
.disabled_checkbox{
display:none;
}
.disabled_checkbox:checked ~ img {
border:solid 2px red;
}
</style>
<div class="image_box">
<label>
<input class="disabled_checkbox" type="checkbox" checked />
<img class="thumbnail" src="sample.jpg" alt="sample">
</label>
</div>

修正

誤解していました画像ではなく枠につけたいのでしたね

<style>
.image_box label{
  background-Color:yellow;
display:block;
width:200px;
height:200px;
}
.disabled_checkbox{
display:none;
}
#img1:checked ~ * [for=img1] {
border:solid 2px red;
}
</style>
<input class="disabled_checkbox" type="checkbox" id="img1" checked />
<div class="image_box">
<label for="img1">
<img class="thumbnail" src="1.jpg" alt="">
</label>
</div>

Comments

[yuko_momi]

すみません、これで書き換えてみたのですが枠線は外枠になったのですが、
チェックボックスが枠の上に行ってしまったのと、枠線がついたときにサイズが変わるのか
ピクッと動いてしまいます。。。

Answer 2

2/10 回答を修正・追加しました。

クラスを追加するところとcssを変えてやれば良いと思います。

$(function() {
  // チェックボックスのクリックを無効化します。
  $('.image_box .disabled_checkbox').click(function() {
    return false;
  });

    // 画像がクリックされた時の処理です。
    $('.image_box').click(function() {
      var $imageList = $('.image_list');
  
      // 現在の選択を解除します。
      $imageList.find('.image_box.checked').removeClass('checked');
  
      // チェックを入れた状態にします。
      $(this).addClass('checked');
    });
});

ul.image_list li .image_box.checked {
  border: 1px solid #BC3500;
}

ul.image_list li .image_box {
  width: 140px;
  height: 160px;
  background: #ffffff;
  text-align: center;
  position: relative;
/*追加*/
  box-sizing: border-box;
  border: 1px solid #ffffff;
}

/*追加*/
.checked .disabled_checkbox {
  display: block; 
}

こんな感じですかね？

Comments

[yuko_momi]

やってみたのですが、常に枠線がついている状態になり、チェックボックスがなくなってしまいました。。。

[Fushi_me]

ごめんなさい、確かにこのコードだとチェックボックスが複数ある時おかしな挙動になってしまいますね・・・修正してみましたが如何でしょう？が、yamabejpさんのご回答のほうがスマートで良いかなと思います。

[yuko_momi]

わざわざありがとうございます。編集してみたのですがこの書き方であってますか？
ただ、これであっていたら、枠がつかなかったです。。。
もし書き方間違えてたらごめんなさい（；；）

[Fushi_me]

あ、分かりにくくてごめんなさい。
.image_box img.thumbnail.checked + .disabled_checkbox {
　display: block;
}
の方は削除して、
.checked .disabled_checkbox {
display: block;
}
の方のみにしてください。
そしてすみません、回答の方編集したのですが、.image_box.checked を　ul.image_list li .image_box.checked にしていただくと枠線は出るようになると思います。詳細度が高いので、チェックした後でもborder: 1px solid #ffffff;の方が適用されてしまっているみたいです。
後、問題が変わってしまうので、できれば質問文のコードは編集しないで、質問文に追加いただくかコメント欄に貼っていただいた方がいいかもです。

[yuko_momi]

できましたー！！！！何度も何度もありがとうございました（＞＜）
感謝です！！！！！

確かに。。。内容を編集してしまうと、おかしなことになりますね。。。
ご指摘ありがとうございます（＞＜）

[yuko_momi]

ちなみになんですが、チェックボックス部分を枠線と同じ#BC3500;に変更することはできますか？

[Fushi_me]

遅くなりました。お役に立てたようで良かったです。
提示してくださっている画像のようにしたいということですかね。チェックボックスの装飾には、チェックボックスをラベルで囲み、本来のチェックボックスは非表示にして、擬似要素で作成するのが一般的かと思います。　
チェックボックス　装飾　などで検索してみると参考記事も沢山出てきますので一度読まれて、またわからないことがあったら別トピックで質問を立てられると良いかと思います。