HTML 체크 박스를 읽기 전용으로 설정할 수 있습니까?

나는 그들이 할 수 있다고 생각했지만, 내 입이 (그렇게 말하면) 어디에 돈을 넣지 않았기 때문에 readonly 속성을 설정하는 것은 실제로 아무것도하지 않는 것 같습니다.

체크 박스를 나머지 양식과 함께 제출하기를 원하기 때문에 Disabled를 사용하지 않고 클라이언트가 특정 상황에서 해당 확인란을 변경할 수 있기를 원하지 않습니다.

이것을 사용할 수 있습니다 :

<input type="checkbox" onclick="return false;"/>

click 이벤트에서 false를 반환하면 실행 체인이 계속 중지되므로 작동합니다.

READONLY필드 값 을 편집 할 수 없으므로 확인란에서 작동하지 않지만 확인란을 사용하면 실제로 필드의 상태를 편집하고 있습니다 (on || off)

에서 faqs.org :

READONLY는 사용자가 필드와 상호 작용하지 않고 필드의 값을 변경하는 것을 막을 수 있다는 것을 이해하는 것이 중요합니다. 예를 들어, 체크 박스에서 체크 또는 체크 (체크 상태 설정) 할 수 있지만 필드 값은 변경하지 않습니다.

사용하고 싶지 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를 사용하는 것입니다 (사용자는 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, text, ...)를 제공하는 것이 좋습니다.

나는 이것을 사용하여 결과를 얻었습니다.

<input type=checkbox onclick="return false;" onkeydown="return false;" />

아래 주어진 해결책을 발견했습니다. 같은 문제에 대한 내 연구를 찾았습니다. 나는 누가 그것을 게시하지 않았지만 그것은 나에 의해 만들어지지 않았습니다. jQuery를 사용합니다.

$(document).ready(function() {
    $(":checkbox").bind("click", false);
});

그러면 체크 박스가 읽기 전용이되어 클라이언트에 읽기 전용 데이터를 표시하는 데 도움이됩니다.

onclick="javascript: return false;"

뒤늦은 답변이지만 대부분의 답변은 지나치게 복잡해 보입니다.

내가 이해했듯이 OP는 기본적으로 원했습니다.

1. 상태를 표시하는 읽기 전용 확인란.
2. 양식과 함께 반환 된 값입니다.

다음 사항에 유의하십시오.

1. OP는 disabled'체크 된 확인란이 나머지 양식과 함께 제출되기를 원하므로'속성 을 사용하지 않는 것을 선호했습니다 .
2. 위의 1에서 OP의 인용 부호가 이미 알고 있음을 나타내므로 선택하지 않은 확인란은 양식과 함께 제출되지 않습니다. 기본적으로 확인란의 값은 선택되어있는 경우에만 존재합니다.
3. 비활성화 된 확인란은 의도적으로 변경할 수 없음을 나타내므로 사용자가 변경을 시도하지 않을 수 있습니다.
4. 체크 박스의 값은 같은 상태를 나타내는에 한정되지 않고, yes나 false,하지만 텍스트가 될 수 있습니다.

따라서 readonly속성이 작동하지 않기 때문에 자바 스크립트가 필요없는 최상의 솔루션은 다음과 같습니다.

1. 이름이나 값이없는 비활성화 된 확인란입니다.
2. 확인란이 선택된 상태로 표시되면 서버에 저장된 이름과 값을 가진 숨겨진 필드입니다.

확인란을 선택하십시오.

<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>

현재 답변의 대부분에는 다음과 같은 문제가 하나 이상 있습니다.

1. 키보드가 아닌 마우스 만 확인하십시오.
2. 페이지로드시 확인하십시오.
3. 항상 인기있는 변경 사항을 연결하거나 다른 항목이 연결되어 있으면 항상 작동하지 않는 이벤트를 제출하십시오.
4. javascript를 사용하여 확인란을 다시 활성화하려면 숨겨진 입력 또는 기타 특수 요소 / 속성이 필요합니다.

다음은 간단하며 문제가 없습니다.

$('input[type="checkbox"]').on('click keyup keypress keydown', function (event) {
    if($(this).is('[readonly]')) { return false; }
});

확인란이 읽기 전용이면 변경되지 않습니다. 그렇지 않으면 그렇습니다. jquery를 사용하지만 이미 사용하고있을 것입니다 ...

효과가있다.

<input name="isActive" id="isActive" type="checkbox" value="1" checked="checked" onclick="return false"/>

양식을 사용하여 서버에 제출하지만 사용자를 위해 상호 작용 하지 않으려면 pointer-events: noneCSS를 사용 하고 (IE10- 및 Opera 12-를 제외한 모든 최신 브라우저에서 작동 ) -1키보드를 통한 변경을 방지 하도록 tab-index를 설정할 수  있습니다. 또한 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 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>

이것을 Asp.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" >

운영팀이 게시하기를 원하기 때문에 '사용 중지됨'은 허용되는 답변이 아닙니다. 그러나 읽기 전용 옵션이 설정되어 있으면 항상 서버 쪽에서도 값의 유효성을 검사해야합니다. 악의적 인 사용자가 읽기 전용 특성을 사용하여 값을 게시하는 것을 막을 수 없기 때문입니다.

원래 값 (서버 쪽)을 저장하고 비활성화로 설정하는 것이 좋습니다. 그런 다음 양식을 제출할 때 게시 된 값을 무시하고 저장 한 원래 값을 사용하십시오.

읽기 전용 값처럼 보이고 작동합니다. 또한 악의적 인 사용자의 게시물을 처리 (무시)합니다. 당신은 하나의 돌로 두 마리의 새를 죽이고 있습니다.

ConroyP의 답변에 대해 언급했지만, 내가 가지고 있지 않은 평판은 50입니다. 다른 답변을 게시 할만큼 평판이 좋습니다. 죄송합니다.

ConroyP의 대답의 문제는 페이지에 확인란을 포함시키지 않아도 확인란을 변경할 수 없다는 것입니다. Electrons_Ahoy가 많이 규정하지는 않지만 가장 좋은 대답은 "disabled"속성이 적용되는 경우와 같이 변경할 수없는 확인란이 변경 가능한 확인란과 같지 않을 경우와 비슷할 것입니다. Electrons_Ahoy가 "disabled"속성을 사용하지 않기로하는 두 가지 이유를 해결하는 솔루션은 "disabled"속성을 사용 했기 때문에 반드시 유효 하지는 않습니다 .

$ 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" ' : '', '/>';

$ checked가 true이면 확인란이 선택되어 표시됩니다. $ checked가 false이면 확인란이 선택되지 않은 것으로 표시됩니다. $ disabled가 false 인 경우에만 확인란의 상태를 변경할 수 있습니다. "my_name"매개 변수는 사용자가 체크 박스를 선택하지 않으면 게시되지 않습니다. "my_name = 1"매개 변수는 사용자가 확인란을 선택하면 게시됩니다. 이것이 Electrons_Ahoy가 찾던 것이라고 생각합니다.

아니요, 입력 확인란은 읽기 전용 일 수 없습니다.

그러나 자바 스크립트로 읽기 전용으로 만들 수 있습니다!

사용자가 어떤 방식 으로든 수정하지 못하도록하여 확인란을 읽기 전용으로 설정하려면 언제든지이 코드를 추가하십시오.

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가로드 된 후 언제든지이 스크립트를 추가 할 수 있습니다.

동적으로 추가 된 요소에 작동합니다.

페이지의 요소에서 클릭 이벤트 (변경 이벤트 전에 발생)를 선택하여 작동 한 다음이 요소가 읽기 전용 확인란인지 확인한 다음 변경이 차단됩니다.

페이지 성능에 영향을 미치지 않는 경우가 너무 많습니다.

아래와 같이 간단한 비활성화 태그를 사용하십시오.

<input type="checkbox" name="email"  disabled>

대체 아이디어는 오버레이를 사용하고 읽기 전용 입력을 덮는 것입니다

http://pure-essence.net/2011/09/22/jquery-read-only-elements/

"readonly"속성이있는 경우 사용자가 "checked"상태를 변경할 수 없도록 모든 확인란을 "잠금"상태로 만들려면 jQuery를 사용할 수 있습니다.

$(':checkbox').click(function () {
    if (typeof ($(this).attr('readonly')) != "undefined") {
        return false;
    }
});

이 코드의 멋진 점은 모든 확인란을 리 바인드하지 않고 코드 전체에서 "읽기 전용"속성을 변경할 수 있다는 것입니다.

라디오 버튼에서도 작동합니다.

사람들이 읽기 전용 확인란과 읽기 전용 라디오 그룹을 원하는 주된 이유는 변경할 수없는 정보가 입력 된 형식으로 사용자에게 다시 제공 될 수 있기 때문입니다.

확인 비활성화는이 작업을 수행합니다. 불행히도 비활성화 된 컨트롤은 키보드를 탐색 할 수 없으므로 모든 접근성 법률에 위배됩니다. 이것은 내가 아는 HTML에서 가장 큰 행 아웃입니다.

매우 늦게 기여하지만 어쨌든. 페이지로드시 jquery를 사용하여 현재 선택된 것을 제외한 모든 확인란을 비활성화하십시오. 그런 다음 현재 선택된 것을 읽기 전용으로 설정하여 비활성화 된 것과 비슷하게 보이게합니다. 사용자가 값을 변경할 수 없으며 선택한 값이 계속 제출됩니다.

파티에 늦었지만 MVC에 대한 답변을 찾았습니다 (5) CheckBox를 비활성화하고 HiddenFor BEFORE 확인란을 추가 했으므로 게시 할 때 숨겨진 필드를 먼저 찾아 해당 값을 사용하면 게시합니다. 이것은 작동합니다.

 <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>

나는 readonly 속성을 사용할 것이다

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

클라이언트가 특정 상황에서 변경하기를 원하지 않습니다.

READONLY 자체는 작동하지 않습니다. CSS로 펑키 한 것을 할 수는 있지만 일반적으로 비활성화합니다.

경고 : 게시 된 경우 고객이 기간을 변경할 수 있습니다. 사용자가 무언가를 변경하지 못하도록 읽기 전용을 사용할 수 없습니다. 는 항상 피들러를 사용하거나 html w / firebug 또는 그와 같은 것들을 노래 할 수 있습니다.

내 솔루션은 실제로 FlySwat의 솔루션과 반대이지만 상황에 맞는지 확실하지 않습니다. 확인란 그룹이 있고 각 양식에는 양식을 제출하는 onClick 핸들러가 있습니다 (테이블의 필터 설정을 변경하는 데 사용됨). 첫 번째 이후의 후속 클릭은 무시되므로 여러 번의 클릭을 허용하고 싶지 않습니다. 따라서 첫 번째 클릭 후와 양식을 제출 한 후 모든 확인란을 비활성화합니다.

onclick="document.forms['form1'].submit(); $('#filters input').each(function() {this.disabled = true});"

확인란은 ID가 "filters"인 span 요소에 있습니다. 코드의 두 번째 부분은 확인란을 반복하고 각각 비활성화하는 jQuery 문입니다. 이렇게하면 확인란 값이 양식을 통해 제출되며 (비활성화하기 전에 양식이 제출되었으므로) 페이지가 다시로드 될 때까지 사용자가 값을 변경하지 못하게합니다.