如何防止用戶在不使用禁用的情況下更改選擇的值？

Question

我有一個很大的表格，里面有很多字段，包括一些選擇選項。 我想防止用戶在不使用“禁用”的情況下更改選擇選項。 因為禁用不包含POST請求中的字段。

我用javascript嘗試了以下方法：

field.readonly = true;

但是我發現readonly不能與select一起使用，就像它們與文本輸入一樣。 因此，我如何防止用戶更改選擇值。 請記住，我要使用表單發布來發布select的值。

Answer 1

您可以簡單地使用css屬性的pointer-events: none; 在選擇標簽中。 它可以防止在下拉菜單中觸發任何點擊，從而使下拉菜單不起作用，您也可以在表單提交中獲得下拉菜單的值。

 .disabledByMe{ pointer-events: none; } 

 <select name="test" class="disabledByMe"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="mercedes">Mercedes</option> <option value="audi">Audi</option> </select> 

Answer 2

您可以使用preventDefault()並return false; 從鍵盤和鼠標操作。

<select onkeydown="event.preventDefault(); return false;" onmousedown="event.preventDefault(); return false;">
    <option>A</option>
    <option>B</option>
</select>

另外，我通常要做的是使我不想禁用的內容，獲取postdata並將它們重新設置為Disabled。

var $disabled = $('#form").find(':disabled');
$disabled.prop('disabled', false);

var postdata = $('#form').serialize();
$disabled.prop('disabled', true);

$.post('/file.php', postdata, function(data) {});

Answer 3

不確定是否要更改<select>使其一旦更改或以這種方式啟動就無法更改。 我假設前者（僅更改過一次？）但是如果是后者，這是一個簡單的修改，如果您有問題，請告訴我。 該演示執行以下操作：

• 用戶使用后，請禁用<select> 。
• 將<select>值分配給<input type='hidden'>值。
• 為<input type='hidden'>分配了[name= X ] ; X = select.name或X = select.id
• 該表格已設置為將數據發送到實時測試服務器 。 響應將重定向到<iframe> 。
• 如果成功，則響應應指示key/value對， ${nameOfSelect/HiddenInput}:{valueOfSelect/HiddenInput}

演示版

 var M = document.forms.main; var F = M.elements; var FS = F.fieldset0; FS.addEventListener('change', freeze); function freeze(e) { if (e.target.tagName === "SELECT") { var tgt = e.target.id; e.target.disabled = true; var cache = document.querySelector(`input[name=${tgt}]`); cache.value = e.target.value; } } 

 [type=submit] { display: block; } 

 <form id='main' action='https://httpbin.org/post' method='post' target='view'> <fieldset id='fieldset0'> <select id='select0' name='select0'> <option default value=""></option> <option value="A">A</option> <option value="B">B</option> <option value="C">C</option> <option value="D">D</option> <option value="E">E</option> </select> <select id='select1' name='select1'> <option default value=""></option> <option value="A">A</option> <option value="B">B</option> <option value="C">C</option> <option value="D">D</option> <option value="E">E</option> </select> <select id='select2' name='select2'> <option default value=""></option> <option value="A">A</option> <option value="B">B</option> <option value="C">C</option> <option value="D">D</option> <option value="E">E</option> </select> </fieldset> <input id='cache0' name='select0' type='hidden'> <input id='cache1' name='select1' type='hidden'> <input id='cache2' name='select2' type='hidden'> <input type='submit'> <iframe name='view'></iframe>