web-dev-qa-db-ja.com

Twitter bootstrap select readonlyはまだオプションを変更できます

bootstrap select with readonly="true"がありますが、選択したオプションを変更できます。

disabled="true"動作が必要ですが、これを使用すると、selectが送信されません。

2つの組み合わせが必要です。選択したオプションは変更できませんが、選択を送信する必要があります。

隠しフィールドを使用することもできましたが、もっと簡単な解決策を望んでいました。

jquerycsstwitter-bootstraptwitter-bootstrap-3yii2
14
Ruben

別の可能性としては、ドロップダウンを使用した選択の置換を使用することが考えられます。ドロップダウンを無効にしても、非表示の選択要素の値を送信できるようにする必要があります。しかし、隠しフィールドを使用することもできます...

または、select要素が無効になっている場合に備えて、選択した値で非表示フィールドを実際に追加します。

<input type="hidden" name="whatever">
<select name="whatever">

非表示フィールドが選択と同じ名前である場合、選択の選択値が非表示フィールドの送信された値を上書きする必要があります（たとえば、選択フィールドがjsで動的に有効化されている場合）。また、選択が無効になっている場合は、非表示フィールドの値が送信されます。最初に送信される順序がわかりません。

$(document).ready(function(){$('select option:not(:selected)').attr('disabled',true);});

このソリューションも機能するはずです（少なくともjsが有効になっている場合）。選択されていないオプションをすべて無効にします。そのため、選択したオプションが送信され、変更できませんでした。

同様の、既に回答済みの質問があります html-form-readonly-select-tag-input

7
BHoft

私は同様の問題に遭遇し、フォームのonsubmitイベントが発生したときに、ブラウザーが無効な属性をサーバーにポストしないため、無効な属性を削除します。

$('form').submit(function () { $('[disabled]').removeAttr('disabled'); })

あなたが言及したように私が見つけた他の唯一のオプションは隠された入力への値を見つけることです。

9
Sean Wessell

ページ読み込み時に読み取り専用に無効を追加

$('[readonly]').prop( "disabled", true );

送信前に削除が無効

$('[readonly]').prop( "disabled", false );

Jqueryドキュメントからのメモ：

JQuery 1.6以降、.attr（）メソッドは、設定されていない属性に対して未定義を返します。フォーム要素のチェック状態、選択状態、無効状態などのDOMプロパティを取得して変更するには、.prop（）メソッドを使用します。

2
Yush0