無法從使用jQuery的html選擇中刪除只讀

我試圖從一些HTML元素動態刪除'只讀'屬性。無法從使用jQuery的html選擇中刪除只讀

我創建了一個[這裏的jsfiddle] [1]，以顯示我的問題，這是我的代碼片段：

$('#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>

來源

2017-06-05 Mr Giggles

選擇只讀？也許殘疾？使用'.prop（）' – guradio

你可以使用[removeAttr]（https://api.jquery.com/removeAttr/）或[prop]（api.jquery.com/prop/）並將你的道具設置爲false。 – AnthonyB

您對removeProp的使用是不正確的。

.removeProp（）方法刪除.prop（）方法設置的屬性。

看看什麼JQuery的醫生說：

注：不要使用此方法來移除固有特性，如選中，禁用，或選擇。這將完全移除，並且一旦移除，不能再次添加到元素。 使用 .prop（）將這些屬性設置爲false。

你必須使用prop屬性來做到這一點

獲得一個屬性的值在一組匹配的元素的第一個元素或設置每個匹配元素的一個或多個屬性。

Fiddle

代碼片段

$('#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>

來源

2017-06-05 08:26:07

嗨，感謝您花時間回答我的問題。我試過運行代碼片段，但它似乎並沒有刪除只讀標誌。 –

@MrGiggles對不起，現在有一個錯別字檢查 –

啊，這段代碼現在工作正常。 –

你應該使用jQuery的ATTR功能：

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

在使用prop代替也可以工作，將best practice您的情況是使用attr。

來源

2017-06-05 08:23:49 Alon

謝謝，我使用了'.removeAttr（'readonly'）'，這已經解決了問題 –

@MrGiggles你不應該使用'removeAttr'這樣的屬性 –

這裏，**從jQuery 1.6開始，.prop（）方法提供了一種顯式檢索屬性值的方法，而.attr（）檢索屬性。** –

jQuery的文檔.removeProp()清楚地表明，它不應該用於刪除本機屬性。

請勿使用此方法刪除本機屬性，如選中，禁用或選中。這將完全刪除該屬性，一旦刪除，不能再添加到元素。使用.prop（）將這些屬性設置爲false。

改爲使用.prop('readonly', false)來使您的文本框可寫。另外，正如@guradio建議的，select boxes don't have readonly property。請使用.prop('disabled', false)來防止用戶進行編輯。

更多詳細信息here。

來源

2017-06-05 08:26:04 31piy

無法從使用jQuery的html選擇中刪除只讀

回答

相關問題