비활성화 된 입력 확인란을 POST / 제출하는 방법은 무엇입니까?

특정 조건에서 비활성화 해야하는 확인란이 있습니다. HTTP가 비활성화 된 입력을 게시하지 않는 것으로 나타났습니다.

그 문제를 어떻게 해결할 수 있습니까? 비활성화 된 경우에도 입력을 제출하고 비활성화 된 상태를 유지합니까?

업데이트 : READONLY확인란에서 작동하지 않습니다

사용할 수 disabled="disabled"있지만이 시점에서 확인란의 값은 값으로 표시되지 않습니다 POST. 전략 중 하나는 동일한 양식 내에서 확인란의 값을 유지하는 숨겨진 필드를 추가하고 해당 필드에서 값을 다시 읽는 것입니다

단순히 변경 disabled에readonly

나는 그 문제를 해결했다.

readonly="readonly"태그가 작동하지 않기 때문에 (다른 브라우저를 사용해 보았습니다) disabled="disabled" 대신 사용해야 합니다. 그러나 귀하의 확인란의 가치는 게시되지 않습니다 ...

내 해결책은 다음과 같습니다.

"읽기 전용" 을 얻으려면 모양과 POST 확인란 값을 동시에 확인란 과 이름과 값이 같은 숨겨진 "입력"을 추가하십시오 . 확인란 옆이나 같은 <form></form>태그 사이에 보관해야 합니다.

<input type="checkbox" checked="checked" disabled="disabled" name="Tests" value="4">SOME TEXT</input>

<input type="hidden" id="Tests" name="Tests" value="4" />

또한, 나중에 알려 readonly="readonly", readonly="true", readonly="",주거나 READONLY해결하지 않을 것입니다! 나는 그것을 알아 내기 위해 몇 시간을 보냈다!

이 참조는 또한 관련이 없습니다 (아직 더 이상 알지 못할 수도 있습니다). http://www.w3schools.com/tags/att_input_readonly.asp

JQuery를 사용하는 것이 좋으면 양식을 제출할 때 disabled 속성을 제거하십시오.

$("form").submit(function() {
    $("input").removeAttr("disabled");
});

이 방법으로 처리 할 수 ​​있습니다 ... 각 확인란마다 동일한 name속성을 가진 숨겨진 필드를 만듭니다 . 그러나 숨겨진 필드의 값을 테스트 할 수있는 기본값으로 설정하십시오. 예를 들어 ..

<input type="checkbox" name="myCheckbox" value="agree" />
<input type="hidden" name="myCheckbox" value="false" />

양식을 제출할 때 확인란을 선택하면 해당 양식 매개 변수의 값은

"agree,false"

확인란을 선택하지 않으면 값은

"false"

"false"대신 모든 값을 사용할 수 있지만 아이디어를 얻습니다.

<input type="checkbox" checked="checked" onclick="this.checked=true" />

나는 "비활성화 된 입력 확인란을 POST / 제출하는 방법"이라는 문제에서 시작했습니다. 그리고 내 대답에서 나는 주석을 건너 뛰었습니다. "확인란을 비활성화하려면 반드시 접두사 값을 선택해야합니다 (확인 또는 선택하지 않음). 또한 사용자가 알고 있어야합니다 (그렇지 않으면 숨겨진 유형을 사용해야합니다. 확인란이 아님) '. 내 대답에서 나는 항상 확인란을 선택하고 코드는 이런 식으로 작동한다고 가정했습니다. 우리가 그 ckeckbox를 클릭하면 그것은 영원히 점검되고 그 값은 게시 / 제출됩니다! 같은 방법으로 checked = "checked"없이 onclick = "this.checked = false"를 작성하면 (참고 : 기본값은 선택 취소됨) 영구적으로 선택 해제되며 해당 값은 POSTED / 제출되지 않습니다!.

CSS 클래스를 작성하십시오.

.disable{
        pointer-events: none;
        opacity: 0.5;
}

비활성화 된 속성 대신이 클래스를 적용하십시오.

가장 간단한 방법은 다음과 같습니다.

<input type="checkbox" class="special" onclick="event.preventDefault();" checked />

이렇게하면 사용자가이 확인란을 선택 취소 할 수 없으며 양식을 제출할 때 해당 값을 계속 제출합니다. 사용자가이 확인란을 선택할 수 없게하려면 제거를 선택하십시오.

또한 자바 스크립트를 사용하여 특정 조건이 충족되면 클릭을 지울 수 있습니다 (이후에 발생하는 경우). 여기 내가 의미하는 것을 보여주는 불쾌한 바이올린이 있습니다. 완벽하지는 않지만 요점을 얻습니다.

http://jsfiddle.net/vwUUc/

이것은 매력처럼 작동합니다.

1. "비활성화"속성 제거
2. 양식 제출
3. 속성을 다시 추가 하십시오. 이를 수행하는 가장 좋은 방법은 setTimeOut 함수 를 사용하는 것입니다 (예 : 1 밀리 초 지연).

제출할 때 비활성화 된 입력 필드 가 짧게 깜박이는 것이 유일한 단점입니다 . 적어도 내 시나리오에서는 그다지 문제가되지 않습니다!

$('form').bind('submit', function () {
  var $inputs = $(this).find(':input'),
      disabledInputs = [],
      $curInput;

  // remove attributes
  for (var i = 0; i < $inputs.length; i++) {
    $curInput = $($inputs[i]);

    if ($curInput.attr('disabled') !== undefined) {
      $curInput.removeAttr('disabled');
      disabledInputs.push(true);
    } else 
      disabledInputs.push(false);
  }

  // add attributes
  setTimeout(function() {
    for (var i = 0; i < $inputs.length; i++) {

      if (disabledInputs[i] === true)
        $($inputs[i]).attr('disabled', true);

    }
  }, 1);

});

비활성화하지 마십시오. 대신 읽기 전용으로 설정하십시오. 사용자가 상태를 변경할 수 없도록하는 경우에는 효과가 없습니다. 그러나 jQuery를 사용하여이를 시행 할 수 있습니다 (사용자가 확인란 상태를 변경하지 못하도록 방지).

$('input[type="checkbox"][readonly="readonly"]').click(function(e){
    e.preventDefault();
});

이것은 수정하고 싶지 않은 모든 체크 박스에 "readonly"속성이 있다고 가정합니다. 예.

<input type="checkbox" readonly="readonly">

이후:

• HTML 사양에 따라 읽기 전용 속성을 확인란으로 설정하는 것은 유효하지 않습니다.
• 숨겨진 요소를 사용하여 가치를 제출하는 것은 그리 좋은 방법이 아니며
• 값을 변경하지 못하게하는 onclick JavaScript 설정도 좋지 않습니다.

또 다른 가능성을 제시하겠습니다.

확인란을 평소와 같이 비활성화로 설정하십시오. 사용자가 양식을 제출하기 전에 JavaScript로이 확인란을 활성화하십시오.

<script>
    function beforeSumbit() {
        var checkbox = document.getElementById('disabledCheckbox');
        checkbox.disabled = false;
    }
</script>
...
<form action="myAction.do" method="post" onSubmit="javascript: beforeSubmit();">
    <checkbox name="checkboxName" value="checkboxValue" disabled="disabled" id="disabledCheckbox" />
    <input type="submit />
</form>

양식을 제출하기 전에 확인란이 활성화되어 있으므로 해당 값이 일반적인 방식으로 게시됩니다. 이 솔루션에 만족스럽지 않은 것은이 확인란이 잠시 동안 활성화되어 사용자가 볼 수 있다는 것입니다. 그러나 그것은 내가 살 수있는 세부 사항 일뿐입니다.

불행히도 '간단한'해결책은 없습니다. 읽기 전용 속성은 확인란에 적용 할 수 없습니다. 확인란에 대한 W3 사양을 읽고 범인을 찾았습니다.

양식을 제출할 때 컨트롤에 현재 값이 없으면 사용자 에이전트는 해당 컨트롤을 성공적인 컨트롤로 취급하지 않아도됩니다. ( http://www.w3.org/TR/html401/interact/forms.html#h-17.13.2 )

이로 인해 검사되지 않은 상태와 비활성화 된 상태가 동일한 구문 분석 된 값이됩니다.

• readonly = "readonly"는 확인란에 유효한 속성이 아닙니다.
• onclick = "event.preventDefault ();" 확인란 자체에서 트리거되므로 항상 좋은 해결책은 아닙니다. 그러나 어떤 경우에는 매력을 발휘할 수 있습니다.
• 제어가 여전히 성공적인 제어로 처리되지 않으므로 값이 구문 분석되지 않으므로 onSubmit 확인란을 사용하는 것은 솔루션이 아닙니다.
• 첫 번째 제어 값이 동일한 이름을 가지므로 두 번째 제어 값으로 겹쳐 쓰기 때문에 HTML에 동일한 이름의 다른 숨겨진 입력을 추가하면 작동하지 않습니다.

이를 수행하는 유일한 완전한 방법 은 양식 제출시 javascript와 동일한 이름의 숨겨진 입력 을 추가하는 것 입니다.

내가 만든 작은 스 니펫을 사용할 수 있습니다.

function disabled_checkbox() {
  var theform = document.forms[0];
  var theinputs = theform.getElementsByTagName('input');
  var nrofinputs = theinputs.length;
  for(var inputnr=0;inputnr<nrofinputs;inputnr++) {
    if(theinputs[inputnr].disabled==true) {
      var thevalueis = theinputs[inputnr].checked==true?"on":"";
      var thehiddeninput = document.createElement("input");
      thehiddeninput.setAttribute("type","hidden");
      thehiddeninput.setAttribute("name",theinputs[inputnr].name);
      thehiddeninput.setAttribute("value",thevalueis);
      theinputs[inputnr].parentNode.appendChild(thehiddeninput);
    }
  }
}

문서의 첫 번째 양식을 찾고 모든 입력을 수집하고 비활성화 된 입력을 검색합니다. 비활성화 된 입력이 발견되면 동일한 이름과 값 'on'(상태가 'checked'인 경우) 및 ''(상태가 ''-not checked 인 경우) 인 부모 노드에 숨겨진 입력이 생성됩니다.

이 함수는 다음과 같이 FORM 요소에서 'onsubmit'이벤트에 의해 트리거되어야합니다.

<form id='ID' action='ACTION' onsubmit='disabled_checkbox();'>

onsubmit="this['*nameofyourcheckbox*'].disabled=false"양식에 추가하십시오 .

hidden필드 이외의 다른 옵션은 없으므로 hidden아래 코드와 같이 필드 를 사용하십시오 .

<input type="hidden" type="text" name="chk1[]" id="tasks" value="xyz" >
<input class="display_checkbox" type="checkbox" name="chk1[]" id="tasks" value="xyz" checked="check"  disabled="disabled" >Tasks

<html>
    <head>
    <script type="text/javascript">
    function some_name() {if (document.getElementById('first').checked)      document.getElementById('second').checked=false; else document.getElementById('second').checked=true;} 
    </script>
    </head>
    <body onload="some_name();">
    <form>
    <input type="checkbox" id="first" value="first" onclick="some_name();"/>first<br/>
    <input type="checkbox" id="second" value="second" onclick="some_name();" />second
    </form>
    </body>
</html>

some_name 함수는 절에 따라 확인 (값을 게시)하거나 확인 (값을 게시하지 않음)하는 두 번째 확인란을 관리하기위한 이전 절의 예이며 사용자는 상태를 수정할 수 없습니다. 두 번째 확인란을 비활성화 할 필요가 없습니다.

원하는대로 비활성화 한 다음 양식을 제출하기 전에 비활성화 된 속성을 제거 할 수 있습니다.

$('#myForm').submit(function() {
    $('checkbox').removeAttr('disabled');
});

추가 onclick="this.checked=true"문제 해결 :
예 :

<input type="checkbox" id="scales" name="feature[]" value="scales" checked="checked" onclick="this.checked=true" />

백엔드에서 다른 해결 방법을 제어 할 수 있습니다.

ASPX

<asp:CheckBox ID="Parts_Return_Yes" runat="server" AutoPostBack="false" />

ASPX.CS에서

Parts_Return_Yes.InputAttributes["disabled"] = "disabled";
Parts_Return_Yes.InputAttributes["class"] = "disabled-checkbox";

수업은 스타일 목적으로 만 추가됩니다.

방금 HTML, JS 및 CSS 제안을 여기 답변에 결합했습니다.

HTML :

<input type="checkbox" readonly>

jQuery :

(function(){
    // Raj: https://stackoverflow.com/a/14753503/260665
    $(document).on('click', 'input[type="checkbox"][readonly]', function(e){
        e.preventDefault();
    });
})();

CSS :

input[type="checkbox"][readonly] {
  cursor: not-allowed;
  opacity: 0.5;
}

요소가 '비활성화되지'않았으므로 여전히 POST를 통과합니다.