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

program story

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

inputbox 2020. 9. 29. 07:43

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

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

나는 체크 박스를 나머지 양식과 함께 제출하기를 원하기 때문에 Disabled를 사용하지 않을 것입니다. 클라이언트가 특정 상황에서이를 변경할 수 없도록하고 싶습니다.

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

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

클릭 이벤트에서 false를 반환하면 실행 체인이 계속 중지되기 때문에 작동합니다.

READONLY필드의 값 을 편집 할 수 없기 때문에 확인란에서 작동하지 않지만 확인란을 사용하면 실제로 필드의 상태를 편집하는 것입니다 (켜기 || 끄기).

에서 faqs.org :

READONLY는 사용자가 필드와 상호 작용하는 것이 아니라 필드 값을 변경하는 것을 막을 뿐이라는 것을 이해하는 것이 중요합니다. 예를 들어 확인란에서 확인란을 켜거나 끌 수 있지만 (따라서 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

이것은 약간의 사용성 문제를 나타냅니다.

확인란을 표시하고 싶지만 상호 작용하지 않으려면 왜 확인란도 표시합니까?

그러나 내 접근 방식은 비활성화 된 것을 사용하고 (사용자는 JS를 사용하여 활성화 된 것을 작동하지 않도록 만드는 대신 비활성화 된 확인란을 편집 할 수 없다고 기대합니다) 양식이 작동하기 직전에 확인란을 활성화하는 자바 스크립트를 사용하여 양식 제출 처리기를 추가하는 것입니다. 제출. 이렇게하면 값이 게시됩니다.

즉 다음과 같습니다.

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 onclick="return false;" onkeydown="return false;" />

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

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

이것은 체크 박스를 읽기 전용으로 만들어 클라이언트에 읽기 전용 데이터를 표시하는 데 도움이됩니다.

onclick="javascript: return false;"

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

일부 양식 요소를 읽기 전용으로 설정하기 위해 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" >

운영자가 게시하기를 원하기 때문에 "disabled"가 허용되는 답변이 아니라는 것을 알고 있습니다. 그러나 읽기 전용 옵션이 설정되어 있더라도 항상 서버 측에서 값의 유효성을 검사해야합니다. 악의적 인 사용자가 readonly 속성을 사용하여 값을 게시하는 것을 막을 수 없기 때문입니다.

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

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

양식을 사용하여 서버에 제출하고 사용자 와 상호 작용 하지 않으려면 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>

I would have commented on ConroyP's answer, but that requires 50 reputation which I don't have. I do have enough reputation to post another answer. Sorry.

The problem with ConroyP's answer is that the checkbox is rendered unchangeable by not even including it on the page. Although Electrons_Ahoy does not stipulate as much, the best answer would be one in which the unchangeable checkbox would look similar, if not the same as, the changeable checkbox, as is the case when the "disabled" attribute is applied. A solution which addresses the two reasons Electrons_Ahoy gives for not wanting to use the "disabled" attribute would not necessarily be invalid because it utilized the "disabled" attribute.

Assume two boolean variables, $checked and $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" ' : '', '/>';

The checkbox is displayed as checked if $checked is true. The checkbox is displayed as unchecked if $checked is false. The user can change the state of the checkbox if and only if $disabled is false. The "my_name" parameter is not posted when the checkbox is unchecked, by the user or not. The "my_name=1" parameter is posted when the checkbox is checked, by the user or not. I believe this is what Electrons_Ahoy was looking for.

Just use simple disabled tag like this below.

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

Belated answer, but most answers seem to over complicate it.

As I understand it, the OP was basically wanting:

Readonly checkbox to show status.
Value returned with form.

It should be noted that:

The OP preferred not to use the disabled attribute, because they 'want the checked check boxes to be submitted with the rest of the form'.
Unchecked checkboxes are not submitted with the form, as the quote from the OP in 1. above indicates they knew already. Basically, the value of the checkbox only exists if it is checked.
A disabled checkbox clearly indicates that it cannot be changed, by design, so a user is unlikely to attempt to change it.
The value of a checkbox is not limited to indicating its status, such as yes or false, but can be any text.

Therefore, since the readonly attribute does not work, the best solution, requiring no javascript, is:

A disabled checkbox, with no name or value.
If the checkbox is to be displayed as checked, a hidden field with the name and value as stored on the server.

So for a checked checkbox:

<input type="checkbox" checked="checked" disabled="disabled" />
<input type="hidden" name="fieldname" value="fieldvalue" />

For an unchecked checkbox:

<input type="checkbox" disabled="disabled" />

The main problem with disabled inputs, especially checkboxes, is their poor contrast which may be a problem for some with certain visual disabilities. It may be better to indicate a value by plain words, such as Status: none or Status: implemented, but including the hidden input above when the latter is used, such as:

<p>Status: Implemented<input type="hidden" name="status" value="implemented" /></p>

an alternative idea is to use an overlay and cover up your readonly inputs

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

No, input checkboxes can't be readonly.

But you can make them readonly with javascript!

Add this code anywhere at any time to make checkboxes readonly work as assumed, by preventing the user from modifying it in any way.

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>

You can add this script at any time after jQuery has loaded.

It will work for dynamically added elements.

It works by picking up the click event (that happens before the change event) on any element on the page, it then checks if this element is a readonly checkbox, and if it is, then it blocks the change.

There are so many ifs to make it not affect the performance of the page.

If you want ALL your checkboxes to be "locked" so user can't change the "checked" state if "readonly" attibute is present, then you can use jQuery:

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

Cool thing about this code is that it allows you to change the "readonly" attribute all over your code without having to rebind every checkbox.

It works for radio buttons as well.

The main reason people would like a read-only check-box and (as well) a read-only radio-group is so that information that cannot be changed can be presented back to the user in the form it was entered.

OK disabled will do this -- unfortunately disabled controls are not keyboard navigable and therefore fall foul of all accessibility legislation. This is the BIGGEST hangup in HTML that I know of.

Contributing very very late...but anyway. On page load, use jquery to disable all checkboxes except the currently selected one. Then set the currently selected one as read only so it has a similar look as the disabled ones. User cannot change the value, and the selected value still submits.

Very late to the party but I found an answer for MVC (5) I disabled the CheckBox and added a HiddenFor BEFORE the checkbox, so when it is posting if finds the Hidden field first and uses that value. This does work.

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

I just don't want the client to be able to change them under certain circumstances.

READONLY itself won't work. You may be able to do something funky w/CSS but we usually just make them disabled.

WARNING: If they're posted back then the client can change them, period. You can't rely on readonly to prevent a user from changing something. The could always use fiddler or just chane the html w/firebug or some such thing.

My solution is actually the opposite of FlySwat's solution, but I'm not sure if it will work for your situation. I have a group of checkboxes, and each has an onClick handler that submits the form (they're used for changing filter settings for a table). I don't want to allow multiple clicks, since subsequent clicks after the first are ignored. So I disable all checkboxes after the first click, and after submitting the form:

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

The checkboxes are in a span element with an ID of "filters" - the second part of the code is a jQuery statement that iterates through the checkboxes and disables each one. This way, the checkbox values are still submitted via the form (since the form was submitted before disabling them), and it prevents the user from changing them until the page reloads.

When posting an HTML checkbox to the server, it has a string value of 'on' or ''.

Readonly does not stop the user editing the checkbox, and disabled stops the value being posted back.
One way around this is to have a hidden element to store the actual value and the displayed checkbox is a dummy which is disabled. This way the checkbox state is persisted between posts.

Here is a function to do this. It uses a string of 'T' or 'F' and you can change this any way you like. This has been used in an ASP page using server side VB script.

public function MakeDummyReadonlyCheckbox(i_strName, i_strChecked_TorF)

    dim strThisCheckedValue

    if (i_strChecked_TorF = "T") then
        strThisCheckedValue = " checked "
        i_strChecked_TorF = "on"
    else
        strThisCheckedValue = ""
        i_strChecked_TorF = ""
    end if

    MakeDummyReadonlyCheckbox = "<input type='hidden' id='" & i_strName & "' name='" & i_strName & "' " & _
        "value='" & i_strChecked_TorF & "'>" & _
    "<input type='checkbox' disabled id='" & i_strName & "Dummy' name='" & i_strName & "Dummy' " & _
        strThisCheckedValue & ">"   
end function

public function GetCheckbox(i_objCheckbox)

    select case trim(i_objCheckbox)

        case ""
            GetCheckbox = "F"

        case else
            GetCheckbox = "T"

    end select

end function

At the top of an ASP page you can pickup the persisted value...

strDataValue = GetCheckbox(Request.Form("chkTest"))

and when you want to output your checkbox you can do this...

response.write MakeDummyReadonlyCheckbox("chkTest", strDataValue)

I have tested this and it works just fine. It also does not rely upon JavaScript.

When submitting the form, we actually pass the value of the checkbox, not the state (checked/unchecked). Readonly attribute prevents us to edit the value, but not the state. If you want to have a read-only field that will represent the value you want to submit, use readonly text.

참고URL : https://stackoverflow.com/questions/155291/can-html-checkboxes-be-set-to-readonly

'program story' 카테고리의 다른 글

C ++에서 인터페이스를 어떻게 선언합니까? (0)	2020.09.29
.NET에서 어셈블리 바인딩 실패 로깅 (Fusion)을 활성화하는 방법 (0)	2020.09.29
단위, 기능, 승인 및 통합 테스트의 차이점은 무엇입니까? (0)	2020.09.29
"~"(물결표 / 구불 구불 / 뒤틀림) CSS 선택기는 무엇을 의미합니까? (0)	2020.09.29
매개 변수를 setTimeout () 콜백에 어떻게 전달할 수 있습니까? (0)	2020.09.29

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

inputbox

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

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

'program story' 카테고리의 다른 글

'program story'의 다른글

티스토리툴바

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

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

'program story' 카테고리의 다른 글

'program story'의 다른글

관련글

티스토리툴바