라디오 버튼을 "읽기 전용"으로 사용할 수없는 이유는 무엇입니까?

라디오 버튼을 표시하고 값을 제출했지만 상황에 따라 편집 할 수 없도록했습니다. Disabled는 값을 제출하지 않거나 작동하지 않기 때문에 작동하지 않으며 라디오 버튼을 회색으로 표시합니다. 읽기 전용은 실제로 내가 찾고있는 것이지만, 신비한 이유로 작동하지 않습니다.

예상대로 작동하기 위해 읽기 전용을 얻기 위해 당겨야 할 이상한 트릭이 있습니까? 대신 JavaScript로해야합니까?

또한, 다른 입력 태그에서는 작동하지만 라디오 버튼에서는 읽기 전용이 작동하지 않는 이유를 아는 사람이 있습니까? 이것은 HTML 사양에서 이해할 수없는 누락 중 하나입니까?

확인되지 않은 라디오 버튼 만 비활성화하여 라디오 버튼에서 읽기 전용을 가짜로 만들었습니다. 사용자가 다른 값을 선택하지 못하도록하며 확인 된 값은 항상 제출시 게시됩니다.

jQuery를 사용하여 읽기 전용으로 만들기 :

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

이 방법은 선택되지 않은 각 옵션을 비활성화해야한다는 점을 제외하고 선택 목록을 읽기 전용으로 만드는 데에도 효과적이었습니다.

다른 옵션이있는 경우 라디오 버튼은 읽기 전용이어야합니다. 다른 옵션이 없으면 확인 된 라디오 버튼을 선택 취소 할 수 없습니다. 다른 옵션이있는 경우 다른 옵션을 비활성화하여 사용자가 값을 변경하지 못하게 할 수 있습니다.

<input type="radio" name="foo" value="Y" checked>
<input type="radio" name="foo" value="N" disabled>

피들 : http://jsfiddle.net/qqVGu/

이것은 당신이 갈 수있는 트릭입니다.

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

DB에 게시하는 긴 양식 (250 개 이상의 필드)이 있습니다. 온라인 취업 신청서입니다. 관리자가 제출 된 응용 프로그램을 보려고하면 양식이 db의 데이터로 채워집니다. 입력 텍스트와 텍스트 영역은 제출 한 텍스트로 바뀌지 만 라디오 및 확인란은 양식 요소로 유지하는 데 유용합니다. 비활성화하면 읽기가 더 어려워집니다. .checked 속성을 false로 설정하면 사용자가 앱을 작성하여 확인했을 수 있으므로 작동하지 않습니다. 아무리 해도...

onclick="return false;"

라디오 비활성화 및 ipso 사실상 확인란의 매력처럼 작동합니다.

최선의 해결책은 클라이언트 또는 서버에서 검사 또는 검사되지 않은 상태를 설정하고 사용자가 병동 후 상태를 변경하지 못하도록 (즉, 읽기 전용으로) 다음을 수행하는 것입니다.

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

확인란과 라디오 버튼의 읽기 전용 상태를 달성하는 자바 스크립트가 많은 방법을 생각해 냈습니다. 현재 버전의 Firefox, Opera, Safari, Chrome 및 현재 및 이전 버전의 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>

이것의 자바 스크립트 부분은 다음과 같이 작동합니다 (개념 만).

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 속성을 변경하여 라디오 버튼 / 확인란을 활성화 / 비활성화 할 수 있습니다.

선택되지 않은 라디오 버튼의 경우 비활성화 된 것으로 플래그를 지정하십시오. 이렇게하면 사용자 입력에 응답하지 않고 선택된 단일 선택 단추를 지울 수 없습니다. 예를 들면 다음과 같습니다.

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

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

상당히 간단한 옵션은 폼의 "onsubmit"이벤트에서 호출되는 자바 스크립트 함수를 만들어 라디오 버튼을 다시 활성화하여 값이 나머지 폼과 함께 게시되도록하는 것입니다.
HTML 사양에서 생략 된 것처럼 보이지 않지만 디자인 선택 (논리적 선택, IMHO), 라디오 버튼은 버튼을 사용할 수 없으므로 읽기 전용이 될 수 없으며 사용하지 않으려는 경우 비활성화하십시오.

나는 사용 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 사용 여부에 관계없이 작동합니다.

속성을 사용해보십시오. disabled그러나 라디오 버튼의 가치를 얻지 못할 것이라고 생각합니다. 또는 다음과 같이 이미지를 설정하십시오.

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

친애하는.

확인란 / 라디오 입력 요소의 스타일 을 지정하는 JS 플러그인 을 사용하고 다음 jQuery를 사용하여 기본 값이 여전히 게시되어 있지만 사용자가 입력 요소에 액세스 할 수없는 '읽기 전용 상태'를 설정했습니다. 우리는 읽기 전용 입력 속성을 사용할 것입니다 ...

if ($(node).prop('readonly')) {
    $(node).parent('div').addClass('disabled'); // just styling, appears greyed out
    $(node).on('click', function (e) {
        e.preventDefault();
    });
}

JS에서 "On_click ()"이벤트를 캡처하고 여기에서 확인하는 것은 어떻습니까? :

http://www.dynamicdrive.com/forums/showthread.php?t=33043