HTML 체크박스를 읽기 전용으로 설정할 수 있습니까?
그럴 수 있다고 생각했지만, 제 입에서 나오는 대로 돈을 넣지 않고 있기 때문에, 읽기 전용 속성을 설정해도 실제로는 아무것도 할 수 없는 것 같습니다.
이 체크박스를 폼의 나머지 부분과 함께 송신하고 싶기 때문에, 특정 상황에서는 클라이언트에 의한 변경은 하고 싶지 않습니다.
다음을 사용할 수 있습니다.
<input type="checkbox" onclick="return false;"/>
클릭 이벤트에서 false를 반환하면 실행 체인이 계속 진행되지 않기 때문에 이 기능이 작동합니다.
READONLY필드의 값을 편집할 수 없기 때문에 체크박스는 기능하지 않지만 체크박스를 켜면 필드의 상태를 실제로 편집할 수 있습니다(on | off).
faqs.org 에서 :
READ ONLY는 사용자가 필드 값을 변경할 수 없도록 할 뿐 필드와의 상호 작용을 방해할 수 없음을 이해하는 것이 중요합니다.예를 들어 체크박스에서 체크박스를 켜거나 끌 수 있지만(따라서 CHECKED 상태를 설정할 수 있습니다) 필드의 값은 변경하지 않습니다.
「 를 합니다.disabled만, 필드로 해, 는 그 하는 것은 를 들어 「」, 「」, 「」, 「」, 「」, 「」, 「」, 「」, 「」, 「」와 같이 합니다.
// user allowed change
if($user_allowed_edit)
{
echo '<input type="checkbox" name="my_check"> Check value';
}
else
{
// Not allowed change - submit value..
echo '<input type="hidden" name="my_check" value="1" />';
// .. and show user the value being submitted
echo '<input type="checkbox" disabled readonly> Check value';
}
이 체크박스는 변경할 수 없습니다.
<input type="checkbox" disabled="disabled" checked="checked">
더하면 돼요.disabled="disabled"아트리뷰트로서
코멘트에 대처하기 위한 편집:
데이터를 다시 게시할 경우 숨김 입력에 동일한 이름을 적용하는 단순한 솔루션보다 다음과 같이 하십시오.
<input name="myvalue" type="checkbox" disabled="disabled" checked="checked"/>
<input name="myvalue" type="hidden" value="true"/>
이렇게 하면 확인란을 '비활성화'로 설정하면 실제로 데이터에 '연결'되는 것이 아니라 데이터를 시각적으로 표현하는 용도로만 사용할 수 있습니다.포스트백에서는, 이 체크 박스를 무효로 하면, 숨겨진 입력의 값이 송신됩니다.
<input type="checkbox" onclick="this.checked=!this.checked;">
단, 서버상의 데이터를 반드시 검증하여 변경되지 않았는지 확인해야 합니다.
또 다른 「솔루션」:
<!-- field that holds the data -->
<input type="hidden" name="my_name" value="1" />
<!-- visual dummy for the user -->
<input type="checkbox" name="my_name_visual_dummy" value="1" checked="checked" disabled="disabled" />
disabled="disabled"/disabled=true
이것은, 조작성의 문제가 약간 있습니다.
체크박스를 표시하고 싶지만 상호작용을 허용하지 않는다면 왜 체크박스를 켜야 할까요?
단, disabled를 사용하여(사용자는 disabled 체크박스를 편집하지 않고 JS를 사용하여 활성화한 체크박스를 기능시키지 않을 것으로 예상함) 폼 송신 직전에 체크박스를 유효하게 하는 javascript를 사용하여 폼 송신 핸들러를 추가하는 방법이 있습니다.이렇게 하면 가치관이 게시됩니다.
즉, 다음과 같습니다.
var form = document.getElementById('yourform');
form.onSubmit = function ()
{
var formElems = document.getElementsByTagName('INPUT');
for (var i = 0; i , formElems.length; i++)
{
if (formElems[i].type == 'checkbox')
{
formElems[i].disabled = false;
}
}
}
<input type="checkbox" readonly="readonly" name="..." />
jquery를 사용하여:
$(':checkbox[readonly]').click(function(){
return false;
});
컨트롤이 입력을 수신하지 않는다는 시각적 힌트(css, 텍스트 등)를 제공하는 것이 좋습니다.
읽기 전용 속성을 사용합니다.
<input type="checkbox" readonly>
다음으로 CSS를 사용하여 인터랙션을 디세블로 합니다.
input[type='checkbox'][readonly]{
pointer-events: none;
}
여기서 pseudo-class:read-only 를 사용하는 것은 동작하지 않습니다.
input[type='checkbox']:read-only{ /*not working*/
pointer-events: none;
}
답변이 늦었지만, 대부분의 답변은 그것을 지나치게 복잡하게 만드는 것 같습니다.
제가 알기로는 OP는 기본적으로 다음을 원했습니다.
- 상태를 표시하는 읽기 전용 체크 박스.
- 폼과 함께 반환된 값입니다.
주의할 점은 다음과 같습니다.
- 는 OP를 했습니다.
disabled선택한 체크박스를 나머지 양식과 함께 제출하도록 하기 때문입니다. - 위의 1.의 OP에서 인용한 바와 같이 선택되지 않은 확인란은 양식과 함께 제출되지 않습니다.기본적으로 체크박스의 값은 체크박스가 켜져 있는 경우에만 존재합니다.
- 비활성화된 체크박스는 설계상 변경할 수 없음을 명확하게 나타내므로 사용자가 변경할 가능성은 거의 없습니다.
- 데 . 확인란에는 제한이 없습니다.
yes★★★★★★★★★★★★★★★★★」false될 . , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , ,
때문에, 「」로,readonly하지 않습니다.로 하지 않는 과 같습니다
- 이름 또는 값이 없는 비활성화된 확인란입니다.
- 체크 박스가 온으로 표시되는 경우는, 이름과 값이 서버에 보존되어 있는 숨김 필드.
체크박스가 켜져 있는 경우:
<input type="checkbox" checked="checked" disabled="disabled" />
<input type="hidden" name="fieldname" value="fieldvalue" />체크박스가 꺼진 경우:
<input type="checkbox" disabled="disabled" />비활성화된 입력, 특히 확인란의 주요 문제는 일부 시각 장애인에게 문제가 될 수 있는 낮은 대비입니다.를 들어, '하다'와 말로 수 .Status: none ★★★★★★★★★★★★★★★★★」Status: implemented단, 후자를 사용하는 경우 위의 숨겨진 입력이 포함됩니다.다음은 다음과 같습니다.
<p>Status: Implemented<input type="hidden" name="status" value="implemented" /></p>저는 결과를 얻기 위해 이것을 사용했습니다.
<input type=checkbox onclick="return false;" onkeydown="return false;" />
현재 답변의 대부분은 다음 중 하나 또는 여러 가지 문제가 있습니다.
- 키보드가 아닌 마우스만 확인합니다.
- 페이지 로드시에만 체크해 주세요.
- 항상 인기 있는 변경 사항을 잠그거나 다른 항목에 걸려 있으면 항상 잘 되지 않는 이벤트를 제출합니다.
- javascript를 사용하여 체크박스를 다시 활성화하려면 숨겨진 입력이나 다른 특수 요소/속성을 실행 취소해야 합니다.
다음은 간단하며 이러한 문제는 없습니다.
$('input[type="checkbox"]').on('click keyup keypress keydown', function (event) {
if($(this).is('[readonly]')) { return false; }
});
확인란이 읽기 전용인 경우 변경되지 않습니다.그게 아니라면, 그럴 거야.jquery를 쓰긴 하는데, 아마 벌써 쓰셨을 거예요.
그건 효과가 있다.
저는 우연히 아래와 같은 해결책을 알게 되었습니다.나는 그것을 같은 문제에 대한 나의 연구를 발견했다.누가 올렸는지는 모르겠지만 제가 만든 게 아니에요.jQuery를 사용합니다.
$(document).ready(function() {
$(":checkbox").bind("click", false);
});
그러면 체크박스가 읽기 전용으로 되어 클라이언트에 읽기 전용 데이터를 표시하는 데 도움이 됩니다.
onclick="javascript: return false;"
는, 「」, 「」, 「」, 「」, 「」, 「다」를 사용할 수 .pointer-events: nonecss(IE10 및 Opera 12를 제외한 모든 최신 브라우저에서 작동) 및 탭 인덱스를 로 설정합니다.-1키보드를 통한 변경을 방지합니다., 이 때, 이 때, 이 때, 이 때, 이 때는 수 점에 해 주세요.label태그를 클릭하면 상태가 바뀝니다.
input[type="checkbox"][readonly] {
pointer-events: none !important;
}
td {
min-width: 5em;
text-align: center;
}
td:last-child {
text-align: left;
}<table>
<tr>
<th>usual
<th>readonly
<th>disabled
</tr><tr>
<td><input type=checkbox />
<td><input type=checkbox readonly tabindex=-1 />
<td><input type=checkbox disabled />
<td>works
</tr><tr>
<td><input type=checkbox checked />
<td><input type=checkbox readonly checked tabindex=-1 />
<td><input type=checkbox disabled checked />
<td>also works
</tr><tr>
<td><label><input type=checkbox checked /></label>
<td><label><input type=checkbox readonly checked tabindex=-1 /></label>
<td><label><input type=checkbox disabled checked /></label>
<td>broken - don't use label tag
</tr>
</table><input name="isActive" id="isActive" type="checkbox" value="1" checked="checked" onclick="return false"/>
<input type="checkbox" onclick="return false" /> 될 요.
여기 있는 몇 가지 답변은 약간 우회적으로 보이지만 여기 작은 해킹이 있습니다.
<form id="aform" name="aform" method="POST">
<input name="chkBox_1" type="checkbox" checked value="1" disabled="disabled" />
<input id="submitBttn" type="button" value="Submit" onClick='return submitPage();'>
</form>
그런 다음 jquery에서 두 가지 옵션 중 하나를 선택할 수 있습니다.
$(document).ready(function(){
//first option, you don't need the disabled attribute, this will prevent
//the user from changing the checkbox values
$("input[name^='chkBox_1']").click(function(e){
e.preventDefault();
});
//second option, keep the disabled attribute, and disable it upon submit
$("#submitBttn").click(function(){
$("input[name^='chkBox_1']").attr("disabled",false);
$("#aform").submit();
});
});
데모: http://jsfiddle.net/5WFYt/
위의 답변을 바탕으로 jQuery를 사용하는 경우 모든 입력에 적합한 솔루션이 될 수 있습니다.
<script>
$(function () {
$('.readonly input').attr('readonly', 'readonly');
$('.readonly textarea').attr('readonly', 'readonly');
$('.readonly input:checkbox').click(function(){return false;});
$('.readonly input:checkbox').keydown(function () { return false; });
});
</script>
아스프와 함께 쓰고 있어요.Net MVC: 일부 폼 요소를 읽기 전용으로 설정합니다.위의 내용은 다음과 같은 경우 부모 컨테이너를 .readonly로 설정하여 텍스트 및 체크박스에 적용됩니다.
<div class="editor-field readonly">
<input id="Date" name="Date" type="datetime" value="11/29/2012 4:01:06 PM" />
</div>
<fieldset class="flags-editor readonly">
<input checked="checked" class="flags-editor" id="Flag1" name="Flags" type="checkbox" value="Flag1" />
</fieldset>
<input type="radio" name="alwaysOn" onchange="this.checked=true" checked="checked">
<input type="radio" name="alwaysOff" onchange="this.checked=false" >
'비활성화'는 받아들일 수 없는 답변이란 걸 알아요 작전부에서 게시하길 원하니까단, 읽기 전용 옵션이 설정되어 있는 경우에도 항상 서버 측에서 값을 검증해야 합니다.이는 악성 사용자가 읽기 전용 속성을 사용하여 값을 게시하는 것을 막을 수 없기 때문입니다.
원래 값(서버 측)을 저장하고 비활성화 시킬 것을 권장합니다.그런 다음 양식을 제출할 때 게시된 값을 무시하고 저장한 원래 값을 가져옵니다.
읽기 전용 값처럼 보입니다.또한 악의적인 사용자의 게시물을 처리(무시)합니다.일석이조야.
아니요, 입력 확인란은 읽기 전용일 수 없습니다.
javascript로 읽기 전용으로 만들 수 있습니다!
사용자가 이 코드를 변경하지 않도록 함으로써 체크박스를 가정한 대로 읽기 전용으로 하려면 언제든지 이 코드를 추가합니다.
jQuery(document).on('click', function(e){
// check for type, avoid selecting the element for performance
if(e.target.type == 'checkbox') {
var el = jQuery(e.target);
if(el.prop('readonly')) {
// prevent it from changing state
e.preventDefault();
}
}
});input[type=checkbox][readonly] {
cursor: not-allowed;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label><input type="checkbox" checked readonly> I'm readonly!</label>jQuery가 로드된 후 언제든지 이 스크립트를 추가할 수 있습니다.
동적으로 추가된 요소에 대해 작동합니다.
페이지상의 임의의 요소에서 클릭이벤트(변경 이벤트 전에 발생)를 선택하면, 이 요소가 읽기 전용 체크 박스가 되어 있는지를 체크하고, 그 경우는 변경을 블록합니다.
페이지 성능에 영향을 주지 않기 위해 여러 가지 조건이 있습니다.
readonly에는 사용할 수 .<input type='checkbox'>
따라서 비활성화된 체크박스의 값을 폼으로 전송해야 할 경우 jQuery를 사용할 수 있습니다.
$('form').submit(function(e) {
$('input[type="checkbox"]:disabled').each(function(e) {
$(this).removeAttr('disabled');
})
});
이렇게 하면 폼을 전송할 때 비활성화된 속성이 요소에서 제거됩니다.
ConroyP의 답변에 대해 코멘트를 하고 싶었지만, 저는 없는 50개의 평판이 필요합니다.또 다른 답변을 올릴 만큼 평판이 좋습니다.미안하다.
ConroyP의 답변의 문제는 페이지에 체크박스를 포함하지 않음으로써 체크박스를 변경할 수 없다는 것입니다.단, 전자_Ahoy는 그다지 규정되어 있지 않습니다만, 「비활성화」속성을 적용하는 경우와 같이, 변경 가능한 체크 박스와 같지는 않더라도, 변경 불가능한 체크 박스가 비슷해 보이는 것이 가장 좋은 답입니다.전자_의 두 가지 이유를 해결하는 해법Ahoy는 "disabled" Atribute를 사용하지 않는 경우 "disabled" Atribute를 사용했기 때문에 반드시 무효인 것은 아닙니다.
$checked 변수와 $disabled 변수의 두 가지 부울 변수를 가정합니다.
if ($checked && $disabled)
echo '<input type="hidden" name="my_name" value="1" />';
echo '<input type="checkbox" name="my_name" value="1" ',
$checked ? 'checked="checked" ' : '',
$disabled ? 'disabled="disabled" ' : '', '/>';
체크박스는 $체크박스가 true인 경우 on으로 표시됩니다.체크박스는 $체크박스가 false일 경우 체크박스가 꺼진 상태로 표시됩니다.사용자는 $disabled가 false인 경우에만 체크박스 상태를 변경할 수 있습니다.체크박스를 끄면 사용자가 "my_name" 파라미터를 게시하지 않습니다."my_name=1" 매개 변수는 확인란을 선택할 때 사용자에 의해 게시됩니다.나는 이것이 전자라고 믿는다.아호이가 찾고 있었어요
Chrome에서는 다음과 같이 동작합니다.
<input type="checkbox" onclick="return false">
"읽기 전용" 속성이 있는 경우 사용자가 "선택된" 상태를 변경할 수 없도록 모든 확인란을 "잠금" 상태로 유지하려면 jQuery를 사용할 수 있습니다.
$(':checkbox').click(function () {
if (typeof ($(this).attr('readonly')) != "undefined") {
return false;
}
});
이 코드의 멋진 점은 모든 체크박스를 다시 바인딩하지 않고도 코드 전체에서 "읽기 전용" 속성을 변경할 수 있다는 것입니다.
라디오 버튼에도 사용할 수 있습니다.
파티에는 늦었지만 MVC(5)에 대한 답변을 찾았습니다.체크박스를 끄고 Hidden For Before 체크박스를 추가했습니다.따라서 게시할 때 먼저 Hidden 필드를 찾아서 이 값을 사용합니다.이거 먹히네.
<div class="form-group">
@Html.LabelFor(model => model.Carrier.Exists, new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.HiddenFor(model => model.Carrier.Exists)
@Html.CheckBoxFor(model => model.Carrier.Exists, new { @disabled = "disabled" })
@Html.ValidationMessageFor(model => model.Carrier.Exists)
</div>
</div>
고객이 특정 상황에서 그것들을 변경할 수 없게 하고 싶을 뿐입니다.
읽기 전용은 동작하지 않습니다.CSS를 사용하면 펑키한 작업을 수행할 수 있지만 보통은 비활성화 시킬 뿐입니다.
경고: 게시물이 다시 게시된 경우 클라이언트가 변경할 수 있습니다.사용자가 무언가를 변경하는 것을 막기 위해 읽기 전용에 의존할 수는 없습니다.는 항상 fiddler를 사용하거나 firebug 등의 html을 사용할 수 있습니다.
사용자가 읽기 전용 체크박스와 읽기 전용 무선 그룹을 원하는 주된 이유는 변경할 수 없는 정보가 입력된 형식으로 사용자에게 다시 표시되도록 하기 위함입니다.
OK disabled는 이 작업을 수행합니다.유감스럽게도 비활성화된 컨트롤은 키보드로 이동할 수 없으므로 모든 접근성 법규에 위반됩니다.이것은 내가 아는 HTML의 가장 큰 중단입니다.
아주 늦게 기고하다니...어쨌든.페이지 로드 시 jquery를 사용하여 현재 선택한 확인란을 제외한 모든 확인란을 비활성화합니다.그런 다음 현재 선택한 항목을 읽기 전용으로 설정하여 비활성화된 항목과 유사한 모양을 만듭니다.사용자는 값을 변경할 수 없으며 선택한 값은 계속 제출됩니다.
폼과 함께 전송해야 하지만 사용자에게 읽기 전용 체크박스가 필요한 경우 해당 체크박스를 비활성화하고 폼이 전송될 때 javascript를 사용하여 다시 활성화할 것을 권장합니다.
여기에는 두 가지 이유가 있습니다.첫 번째이자 가장 중요한 것은 사용자가 변경할 수 있는 체크박스와 읽기 전용 체크박스가 눈에 띄게 다르다는 것입니다.[ Disabled ]는, 이것을 실시합니다.
두 번째 이유는 비활성 상태가 브라우저에 내장되어 있기 때문에 사용자가 무언가를 클릭할 때 실행할 코드가 적기 때문입니다.이것은 아마도 다른 어떤 것보다도 개인적인 선호일 것이다.양식을 제출할 때 이러한 기능을 해제하려면 javascript가 필요합니다.
체크박스를 해제하기 위해 폼을 제출할 때 값을 전달하기 위해 숨겨진 입력을 사용하는 것보다 javascript를 사용하는 것이 더 쉬울 것 같습니다.
언급URL : https://stackoverflow.com/questions/155291/can-html-checkboxes-be-set-to-readonly
'sourcetip' 카테고리의 다른 글
| MS Excel - 구분 기호 포함 (0) | 2023.04.13 |
|---|---|
| '선택' 상자의 자리 표시자를 만들려면 어떻게 해야 합니까? (0) | 2023.04.08 |
| DISTINCT를 사용하여 카운트(*)를 선택합니다. (0) | 2023.04.08 |
| 기존 테이블에 기본 키 추가 (0) | 2023.04.08 |
| 클래스 vsVB 모듈그물 (0) | 2023.04.08 |