html kendo 為什麼單選按鈕不能“只讀”?




readonly radio button in javascript (11)

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

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

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

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


我有一個冗長的表單(250+字段),發佈到數據庫。 這是一個在線就業申請。 當管理員查看已提交的應用程序時,表單將填充來自數據庫的數據。 輸入文本和textareas被替換為他們提交的文本,但無線電和復選框可用作表單元素。 禁用它們會使它們更難閱讀。 將.checked屬性設置為false onclick將不起作用,因為它們可能已被填寫應用程序的用戶檢查過。 無論如何...

onclick="return false;"

工作就像一個魅力的“禁用”收音機和復選框,事實上。


在init:

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

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

Gonza配音



我發現使用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="foo" value="Y" checked>
<input type="radio" name="foo" value="N" disabled>

小提琴: http://jsfiddle.net/qqVGu/ : http://jsfiddle.net/qqVGu/


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); });


這是你可以使用的技巧。

<input type="radio" name="name" onclick="this.checked = false;" />

嘗試disabled的屬性,但我認為你不會得到單選按鈕的價值。 或者將圖像設置為:

<img src="itischecked.gif" alt="[x]" />radio button option

最好的祝福。


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

<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屬性來啟用/禁用單選按鈕/複選框。





readonly