設置MVC複選框爲只讀（或禁用）客戶端

我們有幾個MVC複選框，如：設置MVC複選框爲只讀（或禁用）客戶端

@Html.CheckBoxFor(model => model.hasData, …)

我們有需要來設置所有控件在一個div爲只讀有條件的客戶端代碼（其中包括這些複選框）：

if (someCondition) { 
    $('#' + divIdToDisable + ' input').attr('readonly', 'true'); 
}

我們瞭解到，readonly在複選框上無法正常工作（請參見下文）。

我試過以下，但不會導致數據被調回時的「保存」（見下文也）：

$('#' + divIdToDisable + ' input').attr('disabled', 'true');

這似乎是一個常見的問題，然而在我所有的研究我還沒找到好的客戶端解決方案。

這裏是我的研究：

只讀的複選框不會在所有瀏覽器始終工作：

Can HTML checkboxes be set to readonly?

How can I make a checkbox readonly? not disabled?

使用 '禁用' 與MVC結果沒有價值回報：

Html.CheckBox returns false if disabled, even if seleced

http://davecallan.com/posting-disabled-checkboxes-mvc-razor-views/

這是可以實現有條件的「禁用」 在剃刀代碼：

Asp .net mvc 3 CheckBoxFor method outputs hidden field, that hidden field value is false when checkbox is disabled with selected true

MVC 3: Conditionally Adding the Disabled Attribute with the HtmlHelpers

但是這些都不是客戶端解決方案。

來源

2016-10-19 RunzWitScissors

你爲什麼要使用這個客戶端？爲什麼不在服務器端？ – Arendax

複選框沒有按照您想要的方式工作。您是否可以使用單選按鈕？ –

@Arendsen：有很多現有代碼需要更改 – RunzWitScissors

如果您希望禁用複選框的數據發送到服務器，請在發佈之前將其狀態設置爲enabled。所以，在jQuery中，你可以這樣做：

$("form").on("submit", function(e) 
{ 
    $("input:checkbox").prop("disabled", false); 
});

來源

2016-10-19 14:39:51 ZiNNED

不錯的工作！ – TheValyreanGroup

編輯：儘管在看到ZiNNED的很好的解決方法之後，我的回答似乎有些冒失，但仍然需要注意您遇到此問題的原因。

這是因爲你禁用在div ALL輸入。複選框會發生什麼兩個 ipnuts已創建。一個是隱藏的。這是因爲如果checked屬性不存在，則不會將數據發送到服務器。解決方法是我們隱藏的輸入。這將始終以false值顯示，以便在表單發佈未選中複選框的情況下，false仍會作爲該複選框的值發送到服務器。

要解決您的問題，您需要專門針對複選框輸入。例如

$('#' + divIdToDisable + ' input[type="checkbox"]').attr('disabled', true);

這將允許來自隱藏輸入的錯誤仍被張貼。如果您需要發佈true，則可以將隱藏的值更改爲true。例如（假設每格只有一個複選框）

$('#' + divIdToDisable + ' input[type="hidden"]').val(true);

來源

2016-10-19 14:34:32 Gavin

禁用

$('#' + divIdToDisable + ' input').removeAttr("disabled");

使

$('#' + divIdToDisable + ' input').attr("disabled", true);

來源

2016-10-19 14:36:02 Emil

您可以創建一個readOnly CSS類，您再應用到你需要的複選框使只讀。像這樣...

.readOnly{ 
    pointer-events: none; 
    color: #CCC000; 
}

這將創建的效果複選框被禁用，並且不允許點擊，但仍然通過表單POST值。

來源

2016-10-19 14:37:49 TheValyreanGroup

設置MVC複選框爲只讀（或禁用）客戶端

回答

相關問題