1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

【JQuery】値変更不可&Form送信できるセレクトボックス

Last updated at Posted at 2018-03-19

#困ったことに
・SelectはReadOnly属性が効かない
・Disabledは効くけどForm送信できない

#やりたいこと
・セレクトボックスの値を変更できないようにしたい
・でもForm送信はしたい

#他のoption消しちゃえ
選択させたくないoptionはdisabledにする、とかプラグインをいれる方法もあるみたいですが、プラグインいれるほどではないし、optionをdisabledする方法だと確かに選択できなくなるけど表示されるのが嫌だな~と思って、それなら消しちゃおうと思いました。

他の方法
HTMLのSelectタグやInputタグのRadioボタンをReadOnlyにする方法
セレクトボックスを変更できないよう固定してかつ値も送信するjQueryプラグイン

test.html

<select name="animal" id="animals">
	<option value="dog">いぬ</option>
	<option value="cat" selected="selected">ねこ</option>
	<option value="rabbit">うさぎ</option>
</select>

test.js
 $("#animals select option[value='cat']").prop("selected", true);
 $("#animals select option:not(:selected)").remove();

こういう指定(option:not(:selected))もできるって知らなかったので( ..)φメモメモ

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?