html - kendo - readonly radio button in javascript




為什麼單選按鈕不能“只讀”? (9)

JavaScript的方式 - 這對我有用。

<script>
$(document).ready(function() {
   $('#YourTableId').find('*').each(function () { $(this).attr("disabled", true); });
});
</script>

原因:

  1. $('#YourTableId').find('*') - >這將返回所有標籤。

  2. $('#YourTableId').find('*').each(function () { $(this).attr("disabled", true); }); 迭代在此捕獲的所有對象並禁用輸入標記。

分析(調試):

  1. form:radiobutton在內部被認為是“輸入”標籤。

  2. 就像在上面的函數()中一樣,如果你嘗試打印document.write(this.tagName);

  3. 無論哪裡,在標籤中找到單選按鈕,它都會返回一個輸入標籤。

因此,上面的代碼行可以更好地為單選按鈕標籤進行優化,通過用輸入代替*: $('#YourTableId').find('input').each(function () { $(this).attr("disabled", true); });

我想顯示一個單選按鈕,提交它的值,但根據具體情況,它不可編輯。 禁用不起作用,因為它沒有提交值(或者不是?),並且它會使單選按鈕變為灰色。 只讀是我正在尋找的東西,但出於某種神秘的原因,它不起作用。

是否有一些奇怪的技巧,我需要拉動以只讀方式按預期工作? 我應該用JavaScript代替嗎?

順便說一句,有沒有人知道為什麼只讀不能在單選按鈕中工作,而它在其他輸入標籤中工作? 這是HTML規範中那些不可理解的遺漏嗎?


一個相當簡單的選擇是創建一個在窗體的“onsubmit”事件上調用的javascript函數,以啟用單選按鈕,以便將值與表單的其餘部分一起發布。
它似乎並沒有遺漏HTML規範,但設計選擇(合乎邏輯的,恕我直言),單選按鈕不能作為按鈕只讀,如果你不想使用它,那麼禁用它。



在init:

pscript = "try{if($(this).attr('readonly')){return false;};}catch(err){};"

Me.Attributes.Add("onclick", pscript)

Gonza配音


對於未選中的單選按鈕,將它們標記為禁用。 這可以防止他們響應用戶輸入並清除選中的單選按鈕。 例如:

<input type="radio" name="var" checked="yes" value="Yes"></input>
<input type="radio" name="var" disabled="yes" value="No"></input>

我想出了一個JavaScript重載的方式來實現複選框和單選按鈕的只讀狀態。 它針對當前版本的Firefox,Opera,Safari,谷歌瀏覽器,以及當前和以前版本的IE(直到IE7)進行了測試。

為什麼不簡單地使用你問的殘疾財產? 打印頁面時,禁用的輸入元素會以灰色顯示。 為此實施的客戶希望所有元素都具有相同的顏色。

我不確定是否允許我在這裡發布源代碼,因為我在為一家公司工作的同時開發了這個源代碼,但我可以肯定地分享這些概念。

使用onmousedown事件,您可以在點擊操作更改之前閱讀選擇狀態。 所以你存儲這些信息,然後用onclick事件恢復這些狀態。

<input id="r1" type="radio" name="group1" value="r1" onmousedown="storeSelectedRadiosForThisGroup(this.name);" onclick="setSelectedStateForEachElementOfThisGroup(this.name);" checked="checked">Option 1</input>
<input id="r2" type="radio" name="group1" value="r2" onmousedown="storeSelectedRadiosForThisGroup(this.name);" onclick="setSelectedStateForEachElementOfThisGroup(this.name);">Option 2</input>
<input id="r3" type="radio" name="group1" value="r3" onmousedown="storeSelectedRadiosForThisGroup(this.name);" onclick="setSelectedStateForEachElementOfThisGroup(this.name);">Option 3</input>

<input id="c1" type="checkbox" name="group2" value="c1" onmousedown="storeSelectedRadiosForThisGroup(this.name);" onclick="setSelectedStateForEachElementOfThisGroup(this.name);" checked="checked">Option 1</input>
<input id="c2" type="checkbox" name="group2" value="c2" onmousedown="storeSelectedRadiosForThisGroup(this.name);" onclick="setSelectedStateForEachElementOfThisGroup(this.name);">Option 2</input>
<input id="c3" type="checkbox" name="group2" value="c3" onmousedown="storeSelectedRadiosForThisGroup(this.name);" onclick="setSelectedStateForEachElementOfThisGroup(this.name);" checked="checked">Option 3</input>

這樣的JavaScript部分就會像這樣工作(再次只是概念):

var selectionStore = new Object();  // keep the currently selected items' ids in a store

function storeSelectedRadiosForThisGroup(elementName) {
    // get all the elements for this group
    var radioOrSelectGroup = document.getElementsByName(elementName);

    // iterate over the group to find the selected values and store the selected ids in the selectionStore
    // ((radioOrSelectGroup[i].checked == true) tells you that)
    // remember checkbox groups can have multiple checked items, so you you might need an array for the ids
    ...
}

function setSelectedStateForEachElementOfThisGroup(elementName) {
    // iterate over the group and set the elements checked property to true/false, depending on whether their id is in the selectionStore
    ...

    // make sure you return false here
    return false;
}

您現在可以通過更改輸入元素的onclick和onmousedown屬性來啟用/禁用單選按鈕/複選框。


我發現使用onclick='this.checked = false;' 在一定程度上工作。 被單擊的單選按鈕不會被選中。 但是,如果存在已經選擇的單選按鈕(例如,默認值),則該單選按鈕將被取消選擇。

<!-- didn't completely work -->
<input type="radio" name="r1" id="r1" value="N" checked="checked" onclick='this.checked = false;'>N</input>
<input type="radio" name="r1" id="r1" value="Y" onclick='this.checked = false;'>Y</input>

對於這種情況,單獨保留默認值並禁用其他單選按鈕可以保留已經選擇的單選按鈕並防止它被取消選中。

<!-- preserves pre-selected value -->
<input type="radio" name="r1" id="r1" value="N" checked="checked">N</input>
<input type="radio" name="r1" id="r1" value="Y" disabled>Y</input>

這個解決方案並不是防止默認值被改變的最優雅的方式,但是無論javascript是否被啟用,它都會起作用。


設置選中狀態或未選中狀態(從客戶端或服務器)並且不讓用戶在病房後更改它(即使其只讀)的最佳解決方案可執行以下操作:

<input type="radio" name="name" onclick="javascript: return false;" />

我只是通過禁用未經檢查的單選按鈕來偽造單選按鈕。 它使用戶不會選擇不同的值,並且檢查的值始終會在提交後發布。

使用jQuery進行只讀:

$(':radio:not(:checked)').attr('disabled', true);

這種方法也適用於只讀選擇列表,不同之處在於您需要禁用每個未選定的選項。





readonly