วิธีการโพสต์ / ส่งช่องทำเครื่องหมายอินพุตที่ปิดใช้งาน?

ฉันมีช่องทำเครื่องหมายที่จำเป็นต้องปิดใช้งานตามเงื่อนไขบางประการ ปรากฎว่า 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 ให้ลบแอตทริบิวต์ที่ปิดใช้งานเมื่อส่งแบบฟอร์ม:

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

คุณสามารถจัดการได้ด้วยวิธีนี้ ... สำหรับแต่ละช่องทำเครื่องหมายให้สร้างฟิลด์ที่ซ่อนด้วยnameแอตทริบิวต์เดียวกัน แต่ตั้งค่าของช่องที่ซ่อนไว้ด้วยค่าเริ่มต้นที่คุณสามารถทดสอบได้ ตัวอย่างเช่น..

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

หากช่องทำเครื่องหมายถูก "ทำเครื่องหมาย" เมื่อส่งแบบฟอร์มค่าของพารามิเตอร์ฟอร์มนั้นจะเป็น

"agree,false"

หากไม่ได้เลือกช่องทำเครื่องหมายค่าจะเป็น

"false"

คุณสามารถใช้ค่าใดก็ได้แทน "เท็จ" แต่คุณเข้าใจแล้ว

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

ฉันเริ่มต้นจากปัญหา: "วิธีการโพสต์ / ส่งช่องทำเครื่องหมายอินพุตที่ปิดใช้งาน" และในคำตอบของฉันฉันข้ามความคิดเห็น: "หากเราต้องการปิดใช้งานช่องทำเครื่องหมายเราจำเป็นต้องเก็บค่านำหน้าไว้ (เลือกหรือไม่เลือก) และเราต้องการให้ผู้ใช้ทราบ (มิฉะนั้นเราควรใช้ประเภทที่ซ่อนอยู่และ ไม่ใช่ช่องทำเครื่องหมาย) ". ในคำตอบของฉันฉันคิดว่าเราต้องการตรวจสอบช่องทำเครื่องหมายอยู่เสมอและรหัสนั้นทำงานในลักษณะนี้ ถ้าเราคลิกที่ ckeckbox นั้นจะถูกตรวจสอบตลอดไปและค่าของมันจะถูก POSTED / Submitted! ในทำนองเดียวกันถ้าฉันเขียน onclick = "this.checked = false" โดยไม่มีการตรวจสอบ = "ตรวจสอบ" (หมายเหตุ: ค่าเริ่มต้นไม่ถูกเลือก) จะไม่ถูกเลือกตลอดไปและค่าของมันจะไม่ถูกโพสต์ / ส่ง!

สร้างคลาส css เช่น:

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

ใช้คลาสนี้แทนแอตทริบิวต์ที่ปิดใช้งาน

วิธีที่ง่ายที่สุดคือ:

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

การดำเนินการนี้จะป้องกันไม่ให้ผู้ใช้ไม่สามารถยกเลิกการเลือกช่องทำเครื่องหมายนี้ได้และจะยังคงส่งค่าเมื่อส่งแบบฟอร์ม นำออกเลือกหากคุณต้องการให้ผู้ใช้ไม่สามารถเลือกช่องทำเครื่องหมายนี้ได้

นอกจากนี้คุณสามารถใช้ javascript เพื่อล้าง onclick เมื่อตรงตามเงื่อนไขบางอย่างแล้ว (หากนั่นคือสิ่งที่คุณต้องการ) นี่คือซอที่ดูสกปรกและแสดงให้เห็นว่าฉันหมายถึงอะไร มันไม่สมบูรณ์แบบ แต่คุณได้รับส่วนสำคัญ

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

นี่จะถือว่าช่องทำเครื่องหมายทั้งหมดที่คุณไม่ต้องการแก้ไขมีแอตทริบิวต์ "อ่านอย่างเดียว" เช่น.

<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 ของคุณไม่ได้ผลเนื่องจากค่าควบคุมแรกถูกเขียนทับโดยค่าควบคุมที่สองเนื่องจากมีชื่อเดียวกัน

วิธีเดียวที่พิสูจน์ได้เต็มรูปแบบคือการเพิ่มอินพุตที่ซ่อนอยู่ด้วยชื่อเดียวกันกับจาวาสคริปต์ในการส่งแบบฟอร์มเพิ่มการป้อนข้อมูลที่ซ่อนอยู่ที่มีชื่อเดียวกันกับจาวาสคริปต์ในการส่งแบบฟอร์ม

คุณสามารถใช้ข้อมูลโค้ดขนาดเล็กที่ฉันสร้างขึ้นสำหรับสิ่งนี้:

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

สิ่งนี้ค้นหารูปแบบแรกในเอกสารรวบรวมอินพุตทั้งหมดและค้นหาอินพุตที่ปิดใช้งาน เมื่อพบอินพุตที่ปิดใช้งานอินพุตที่ซ่อนไว้จะถูกสร้างขึ้นใน parentNode ที่มีชื่อเดียวกันและค่า 'on' (ถ้าสถานะเป็น 'ถูกตรวจสอบ') และ '' (หากเป็นสถานะเป็น '' - ไม่ได้เลือกไว้)

ฟังก์ชันนี้ควรถูกเรียกใช้โดยเหตุการณ์ 'onsubmit' ในองค์ประกอบ FORM เป็น:

<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