web-dev-qa-db-ja.com

html <select>要素を「無効」に見せながら値を渡す方法は？

無効にしているとき

<select name="sel" disabled>
    <option>123</option>
</select>

要素の場合、変数を渡しません。

無効になっているように見えますが、「通常の」状態にするにはどうすればよいですか？

これは、「選択」のリストがあり、その中には単一の値を持つものもあるため、ユーザーはクリックせずに値が1つだけであることを理解する必要があるためです。

htmlselectdisabled-input
40
el Dude

必要に応じて無効のままにして、フォームが送信される前に無効属性を削除できます。

$('#myForm').submit(function() {
    $('select').removeAttr('disabled');
});

このメソッドに依存している場合、プログラムで無効にすることもできます。JSが無効になっているか、サポートされていない場合は、無効な選択のままになるためです。

$(document).ready(function() {
    $('select').attr('disabled', 'disabled');
});
53
tomaroo
<select id="test" name="sel">
  <option disabled>1</option>
  <option disabled>2</option>
</select>

または、jQueryを使用できます

$("#test option:not(:selected)").prop("disabled", true);
14
dingyuchi

私の解決策は、CSSで無効なクラスを作成することでした：

.disabled {
    pointer-events: none;
    cursor: not-allowed;
}

そして、あなたの選択は次のようになります：

<select name="sel" class="disabled">
    <option>123</option>
</select>

ユーザーは値を選択できませんが、選択値はフォーム送信時に渡されます。

10
Denis Priebe

選択にデフォルト値を指定できる場合、実際の要素の前に非表示の入力を必要とするチェックされていないチェックボックスに対して同じアプローチを使用できます。チェックされていない場合、値はポストされません。

<input type="hidden" name="myfield" value="default" />
<select name="myfield">
    <option value="default" selected="selected">Default</option>
    <option value="othervalue">Other value</option>
    <!-- ... //-->
</select>

これは、選択がjavascript（またはjQuery）によって無効にされている場合、または属性：disabled = "disabled"を使用して要素自体を無効にするhtmlを書き込む場合でも、実際に値「default」（明らかに引用符なし）をポストします。

6
Kirito

クラスを追加.disabledそしてこれを使用します[〜＃〜] css [〜＃〜]：

​.disabled {border: 1px solid #999; color: #333; opacity: 0.5;}
.disabled option {color: #000; opacity: 1;}​

デモ： http://jsfiddle.net/ZCSRq/

3
Praveen Kumar Purushothaman

無効化されたリストと同じ名前と値を持つ追加の非表示入力要素を使用できます。これにより、値が$ _POST変数に確実に渡されます。

例えば：

<select name="sel" disabled><option>123</select>
<input type="hidden" name="sel" value=123>
2
user3654478

うわー、私は同じ問題を抱えていたが、コードの行は私の問題を解決しました。私が書いた

$last_child_topic.find( "*" ).prop( "disabled", true );
$last_child_topic.find( "option" ).prop( "disabled", false );   //This seems to work on mine

フォームをphpスクリプトに送信すると、以前は「null」だったときに各オプションの正しい値が出力されます。

これがうまくいくかどうか教えてください。これはどういうわけか私の上でしか機能しないのだろうか。

1
user3290525

属性を無効にしたくない場合は、プログラムで実行できます

<select class="yourClass">このコードの要素：

//bloqueo selects
  //block all selects
  jQuery(document).on("focusin", 'select.yourClass', function (event) {
    var $selectDiabled = jQuery(this).attr('disabled', 'disabled');
    setTimeout(function(){ $selectDiabled.removeAttr("disabled"); }, 30);
  });

試してみたい場合は、ここで確認できます： https://jsfiddle.net/9kjqjLyq/

0
Robert Blasco Villarroya