jQueryを使ってhtml selectからreadonlyを削除できません。

Question

一部のHTML要素から 'readonly'属性を動的に削除しようとしています。

$('#theButton').on('click', function() { 
 
    $('#mySelect').removeProp('readonly'); 
 
    $('#textInput').removeProp('readonly'); 
 
    //stop the form posting back 
 
    return false; 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form> 
 
    <label>Some input fields</label> 
 
    <input type='text' class='form-control' id='textInput' readonly> 
 
    <select id='mySelect' readonly class='form-control input-sm '> 
 
    <option>1</option> 
 
    <option>2</option> 
 
    </select> 
 
    <button class='btn btn-primary' id='theButton'> 
 
    Enable Button 
 
    </button> 
 
</form>

Answer 1

removePropの使用が間違っています。

.removeProp（）メソッドは、.prop（）メソッドで設定されたプロパティを削除します。

は、jQueryのドキュメントが言うことを見てみましょう：

注：は、無効化、または選択してチェックなど などのネイティブプロパティを削除するには、このメソッドを使用しないでください。これにより、プロパティ が完全に削除され、一度削除すると、再び要素に追加することはできません。 .prop（）を使用して、これらのプロパティをfalseに設定します。

あなたはすべて一致 要素のための1つ以上の特性を マッチした要素の集合内の最初の要素のプロパティの値を取得または設定し、この

を行うにはpropプロパティを使用する必要があります。

Fiddle

SNIPPET

$('#theButton').on('click', function() { 
 
    $('#mySelect').prop('disabled', false); 
 
    $('#textInput').prop('readonly', false); 
 
    return false; 
 
})

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form> 
 
    <label>Some input fields</label> 
 
    <input type='text' class='form-control' id='textInput' readonly> 
 
    <select id='mySelect' disabled class='form-control input-sm '> 
 
<option>1</option> 
 
<option>2</option> 
 
</select> 
 
    <button class='btn btn-primary' id='theButton'> 
 
Enable Button 
 
</button> 
 
</form>

Answer 2

あなたはjQueryののATTRの機能を使用する必要があります：

は、私は[JSFiddleはこちら] [1]私の問題を表示するには、ここに私のコードスニペットで作成しました

状況に

$('#mySelect').attr("readonly", false); 
$('#textInput').attr("readonly", false); 

propを使用して代わりに、あまりにも動作しますが、best practiceはを使用することです。

Answer 3

jQueryの.removeProp()のドキュメントには、ネイティブプロパティを削除するために使用すべきではないことが明確に記載されています。

このメソッドを使用して、チェック、無効、選択などのネイティブプロパティを削除しないでください。これにより、プロパティが完全に削除され、一度削除すると、再び要素に追加することはできません。これらのプロパティをfalseに設定するには、.prop（）を使用します。

代わりに.prop('readonly', false)を使用して、テキストボックスを書き込み可能にします。また、@ guradioが提案したように、select boxes don't have readonly property。ユーザーが編集しないようにするには、.prop('disabled', false)を使用してください。

詳細here。