ช่องทำเครื่องหมาย HTML สามารถตั้งค่าเป็นแบบอ่านอย่างเดียวได้หรือไม่

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

ฉันไม่ต้องการใช้ Disabled เนื่องจากฉันต้องการให้กล่องกาเครื่องหมายถูกส่งมาพร้อมกับส่วนที่เหลือของแบบฟอร์มฉันไม่ต้องการให้ลูกค้าเปลี่ยนรูปแบบได้ภายใต้สถานการณ์บางอย่าง

คุณสามารถใช้สิ่งนี้:

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

ใช้งานได้เนื่องจากการส่งคืน false จากเหตุการณ์คลิกหยุดการดำเนินการต่อเนื่องของห่วงโซ่

READONLYไม่ทำงานบนช่องทำเครื่องหมายเพราะจะป้องกันไม่ให้คุณแก้ไขค่าของเขตข้อมูลแต่ด้วยช่องทำเครื่องหมายคุณจะแก้ไขสถานะของเขตข้อมูลจริง(ใน | | ปิด)

จากfaqs.org :

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

หากคุณไม่ต้องการใช้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, 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. ช่องทำเครื่องหมายที่ไม่ได้ทำเครื่องหมายจะไม่ถูกส่งไปพร้อมกับฟอร์มเนื่องจากอ้างจาก OP ใน 1 ข้างต้นบ่งชี้ว่าพวกเขารู้แล้ว โดยทั่วไปแล้วค่าของช่องทำเครื่องหมายจะมีอยู่หากตรวจสอบแล้วเท่านั้น
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: noneใน css ( ใช้ได้กับเบราว์เซอร์ที่ทันสมัยทั้งหมดยกเว้น 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 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" >

ฉันรู้ว่า "ปิดใช้งาน" ไม่ใช่คำตอบที่ยอมรับได้เนื่องจาก op ต้องการให้โพสต์ อย่างไรก็ตามคุณจะต้องตรวจสอบค่าในฝั่งเซิร์ฟเวอร์เสมอหากคุณมีชุดตัวเลือกแบบอ่านอย่างเดียว นี่เป็นเพราะคุณไม่สามารถหยุดผู้ใช้ที่เป็นอันตรายจากการโพสต์ค่าโดยใช้คุณลักษณะการอ่านอย่างเดียว

ฉันแนะนำให้เก็บค่าดั้งเดิม (ฝั่งเซิร์ฟเวอร์) และตั้งค่าเป็นปิดใช้งาน จากนั้นเมื่อพวกเขาส่งแบบฟอร์มให้ละเว้นค่าใด ๆ ที่โพสต์และรับค่าดั้งเดิมที่คุณเก็บไว้

มันจะมีลักษณะและประพฤติเหมือนเป็นค่าที่อ่านได้อย่างเดียว และมันจัดการ (ละเว้น) โพสต์จากผู้ใช้ที่เป็นอันตราย คุณกำลังฆ่านก 2 ตัวด้วยหินก้อนเดียว

ฉันจะแสดงความคิดเห็นต่อคำตอบของ ConroyP แต่ต้องใช้ 50 ชื่อเสียงที่ฉันไม่มี ฉันมีชื่อเสียงพอที่จะโพสต์คำตอบอื่น ขอโทษ

ปัญหาเกี่ยวกับคำตอบของ ConroyP ก็คือช่องทำเครื่องหมายจะไม่สามารถเปลี่ยนได้โดยไม่ได้รวมไว้ในหน้า แม้ว่า Electrons_Ahoy ไม่ได้กำหนดมาก แต่คำตอบที่ดีที่สุดคือคำที่ช่องทำเครื่องหมายที่เปลี่ยนไม่ได้จะมีลักษณะคล้ายกันหากไม่เหมือนกับช่องทำเครื่องหมายที่เปลี่ยนแปลงได้เช่นในกรณีที่ใช้คุณลักษณะ "ปิดใช้งาน" วิธีการแก้ปัญหาซึ่งกล่าวถึงเหตุผลสองประการที่ Electrons_Ahoy ให้ไว้เพราะไม่ต้องการใช้คุณลักษณะ "ปิดใช้งาน" นั้นไม่จำเป็นว่าจะไม่ถูกต้องเพราะใช้คุณลักษณะ "ปิดใช้งาน"

สมมติว่าตัวแปรบูลีนสองตัวคือ $ 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" ' : '', '/>';

ช่องทำเครื่องหมายจะปรากฏเป็นตรวจสอบว่าการตรวจสอบ $ เป็นจริง ช่องทำเครื่องหมายจะปรากฏเป็นไม่ถูกตรวจสอบถ้า $ ตรวจสอบเป็นเท็จ ผู้ใช้สามารถเปลี่ยนสถานะของช่องทำเครื่องหมายหาก $ ปิดใช้งานเป็นเท็จ พารามิเตอร์ "my_name" จะไม่ถูกโพสต์เมื่อไม่ได้เลือกช่องทำเครื่องหมายโดยผู้ใช้หรือไม่ พารามิเตอร์ "my_name = 1" ถูกโพสต์เมื่อมีการทำเครื่องหมายในช่องทำเครื่องหมายโดยผู้ใช้หรือไม่ ฉันเชื่อว่านี่คือสิ่งที่ Electrons_Ahoy กำลังมองหา

ไม่ได้ช่องทำเครื่องหมายอินพุตไม่สามารถอ่านได้อย่างเดียว

แต่คุณสามารถทำให้พวกเขาอ่านด้วย 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

มันจะทำงานสำหรับองค์ประกอบที่เพิ่มแบบไดนามิก

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

มีไอเอฟเอสจำนวนมากที่จะไม่ส่งผลต่อประสิทธิภาพของหน้าเว็บ

เพียงใช้แท็กที่ปิดใช้งานง่ายเช่นนี้ด้านล่าง

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

แนวคิดทางเลือกคือใช้การซ้อนทับและปกปิดอินพุตแบบอ่านอย่างเดียวของคุณ

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

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

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

สิ่งที่ยอดเยี่ยมเกี่ยวกับรหัสนี้คือช่วยให้คุณสามารถเปลี่ยนแอตทริบิวต์ "อ่านได้อย่างเดียว" ทั่วรหัสของคุณโดยไม่ต้องทำซ้ำทุกช่องทำเครื่องหมาย

มันใช้งานได้กับปุ่มตัวเลือกเช่นกัน

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

ตกลงถูกปิดการใช้งานจะทำเช่นนี้ - การควบคุมที่ถูกปิดใช้งานไม่น่าจะเป็นไปไม่ได้ในการนำทางแป้นพิมพ์ นี่คือ Hangup ที่ใหญ่ที่สุดใน HTML ที่ฉันรู้

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

สายไปปาร์ตี้มาก แต่ฉันพบคำตอบสำหรับ MVC (5) ฉันปิดการใช้งานช่องทำเครื่องหมายและเพิ่ม HiddenFor ก่อนช่องทำเครื่องหมายดังนั้นเมื่อมีการโพสต์หากพบว่าเขตข้อมูลที่ซ่อนอยู่ก่อนและใช้ค่านั้น มันใช้งานได้

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

ฉันจะใช้คุณลักษณะอ่านอย่างเดียว

<input type="checkbox" readonly>

จากนั้นใช้ CSS เพื่อปิดการโต้ตอบ:

input[type='checkbox'][readonly]{
    pointer-events: none;
}

โปรดทราบว่าการใช้คลาส pseudo: อ่านอย่างเดียวไม่สามารถใช้งานได้ที่นี่

input[type='checkbox']:read-only{ /*not working*/
    pointer-events: none;
}

ฉันไม่ต้องการให้ลูกค้าสามารถเปลี่ยนแปลงได้ภายใต้สถานการณ์ที่แน่นอน

ด้วยตนเองเองจะไม่ทำงาน คุณอาจจะสามารถทำสิ่งที่ขี้ขลาดกับ CSS แต่เรามักจะทำให้พวกเขาปิดการใช้งาน

คำเตือน: หากพวกเขาโพสต์กลับมาแล้วลูกค้าสามารถเปลี่ยนระยะเวลา คุณไม่สามารถพึ่งพาแบบอ่านอย่างเดียวเพื่อป้องกันผู้ใช้จากการเปลี่ยนแปลงบางอย่าง สามารถใช้พู้ทำเล่นหรือใช้ html w / firebug หรือสิ่งอื่น ๆ

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

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

ช่องทำเครื่องหมายอยู่ในองค์ประกอบขยายที่มี ID ของ "ตัวกรอง" - ส่วนที่สองของรหัสคือคำสั่ง jQuery ที่วนซ้ำผ่านช่องทำเครื่องหมายและปิดใช้งานแต่ละรายการ ด้วยวิธีนี้ค่าช่องทำเครื่องหมายจะยังคงส่งผ่านทางแบบฟอร์ม (เนื่องจากมีการส่งแบบฟอร์มก่อนที่จะปิดการใช้งาน) และจะป้องกันผู้ใช้จากการเปลี่ยนแปลงพวกเขาจนกว่าจะโหลดหน้าใหม่