HTML onay kutuları salt okunur olarak ayarlanabilir mi?

Olabileceğini düşündüm, ama paramı ağzımın olduğu yere koymadığım için (tabiri caizse) salt okunur özniteliği ayarlamak aslında hiçbir şey yapmıyor gibi görünüyor.

Devre Dışı kullanmak istemiyorum, çünkü işaretli onay kutularının formun geri kalanıyla birlikte gönderilmesini istiyorum, sadece müşterinin belirli koşullar altında bunları değiştirmesini istemiyorum.

bunu kullanabilirsiniz:

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

Bunun nedeni, click olayından false döndürülmesi yürütme zincirinin devam etmesini durdurmasıdır.

READONLYbir alanın değerini düzenlemenizi engellediği için onay kutularında çalışmaz , ancak bir onay kutusuyla aslında alanın durumunu düzenlersiniz (açık || kapalı)

Gönderen faqs.org :

READONLY'un kullanıcının alanla etkileşimini değil, yalnızca alanın değerini değiştirmesini engellediğini anlamak önemlidir. Örneğin, onay kutularında bunları açabilir veya kapatabilirsiniz (böylece KONTROL EDİLDİ durumunu ayarlayarak) ancak alanın değerini değiştiremezsiniz.

Kullanmak istemiyor disabledancak yine de değeri göndermek istiyorsanız, değeri gizli bir alan olarak göndermeye ve yalnızca düzenleme ölçütlerini karşılamadığında içeriğini kullanıcıya yazdırmaya ne dersiniz? Örneğin

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

Bu değiştiremeyeceğiniz bir onay kutusudur:

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

disabled="disabled"Özellik olarak ekleyin .

Yorumları ele almak için düzenleyin:

Verilerin geri gönderilmesini istiyorsanız, basit bir çözümden ziyade gizli bir girişe aynı adı uygulamaktır:

<input name="myvalue" type="checkbox" disabled="disabled" checked="checked"/>
<input name="myvalue" type="hidden" value="true"/>

Bu şekilde, onay kutusu 'devre dışı' olarak ayarlandığında, gerçekte verilere 'bağlı' olmak yerine sadece verilerin görsel olarak temsil edilmesi amacına hizmet eder. Geri gönderide, onay kutusu devre dışı bırakıldığında gizli girişin değeri gönderilir.

<input type="checkbox" onclick="this.checked=!this.checked;">

Ancak değiştirilmediğinden emin olmak için sunucudaki verileri mutlaka doğrulamanız GEREKİR.

başka bir "basit çözüm":

<!-- 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" />

devre dışı = "devre dışı" / devre dışı = doğru

Bu, bir miktar kullanılabilirlik sorunu ortaya koymaktadır.

Bir onay kutusunu görüntülemek istiyor, ancak onunla etkileşime girmesine izin vermiyorsanız, neden bir onay kutusu bile?

Ancak, yaklaşımım devre dışı kullanmak (Kullanıcı, etkinleştirilmiş bir çalışmayı yapmak için JS kullanmak yerine devre dışı bırakılmış bir onay kutusunun düzenlenebilir olmasını bekler) ve javascript kullanarak form gönderilmeden hemen önce onay kutularını etkinleştiren bir form gönderme işleyicisi ekler. gönderilen. Bu şekilde değerlerinizi kaydedersiniz.

yani böyle bir şey:

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

$(':checkbox[readonly]').click(function(){
            return false;
        });

kontrolün girdileri kabul etmeyeceği konusunda bazı görsel ipuçları (css, text, ...) vermek iyi bir fikir olabilir.

Sonuçları elde etmek için bunu kullandım:

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

Aşağıda verilen çözümü fark ettim. Aynı konu için yaptığım araştırmayı buldum. Bunu kimin gönderdiğini bilmiyorum ama benim tarafımdan yapılmadı. JQuery kullanır:

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

Bu, onay kutularının salt okunur olmasını sağlar, bu da istemciye salt okunur veri gösterilmesine yardımcı olur.

onclick="javascript: return false;"

Gecikmiş cevap, ancak çoğu cevap bunu karmaşıklaştırıyor gibi görünüyor.

Anladığım kadarıyla, OP temel olarak şunları istiyordu:

1. Durumu göstermek için salt okunur onay kutusu.
2. Form ile döndürülen değer.

Bu not alınmalı:

1. OP disabled, 'işaretli onay kutularının formun geri kalanıyla birlikte gönderilmesini istedikleri' için özniteliği kullanmamayı tercih etti .
2. Yukarıdaki OP'de verilen fiyat teklifi zaten bildiğini gösterdiğinden, işaretlenmemiş onay kutuları formla birlikte gönderilmez. Temel olarak, onay kutusunun değeri yalnızca işaretliyse vardır.
3. Devre dışı bırakılmış bir onay kutusu, tasarım gereği değiştirilemeyeceğini açıkça gösterir, bu nedenle bir kullanıcının değiştirmeyi denemesi olası değildir.
4. Bir onay kutusunun değeri, yesveya gibi durumunu göstermekle sınırlı değildir false, ancak herhangi bir metin olabilir.

Bu nedenle, readonlyözellik çalışmadığından, javascript gerektirmeyen en iyi çözüm şudur:

1. Adı veya değeri olmayan devre dışı bırakılmış bir onay kutusu.
2. Onay kutusu işaretli olarak görüntülenecekse, sunucuda depolanan ad ve değere sahip gizli bir alan.

İşaretli bir onay kutusu için:

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

İşaretlenmemiş bir onay kutusu için:

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

Engelli girişleri, özellikle onay kutuları ile ilgili temel sorun, bazı görsel engelleri olan bazıları için sorun olabilecek zayıf kontrastlarıdır. Bir değeri Status: noneveya gibi düz kelimelerle belirtmek daha iyidir Status: implemented, ancak ikincisi kullanıldığında yukarıdaki gizli giriş dahil, örneğin:

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

Mevcut cevapların çoğunda bu sorunlardan biri veya daha fazlası bulunur:

1. Klavyeyi değil yalnızca fareyi kontrol edin.
2. Yalnızca sayfa yüklenirken kontrol edin.
3. Her zaman popüler olan değişikliği bağlayın veya başka bir şey takılırsa her zaman işe yaramayacak etkinlikler gönderin.
4. Javascript kullanarak onay kutusunu yeniden etkinleştirmek için geri almanız gereken gizli bir giriş veya diğer özel öğeleri / nitelikleri isteyin.

Aşağıdakiler basittir ve bu sorunların hiçbirine sahip değildir.

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

Onay kutusu salt okunursa, değişmez. Değilse, olacak. Jquery kullanıyor, ancak muhtemelen bunu zaten kullanıyorsunuz ...

İşe yarıyor.

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

Bunları formu ile sunucuya gönderilen ancak Interacive kullanıcı için kullanabileceğiniz olmak istiyorsanız pointer-events: nonecss ( IE10- ve Opera 12- hariç tüm modern tarayıcılarda eserlerini kadar) ve set sekme dizini  -1klavye ile değişen önlemek için. Ayrıca, labeletiketi tıklamanın durumu zaten değiştireceği için kullanamayacağınızı unutmayın .

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" /> senin için çalışacak, bunu kullanıyorum

Buradaki cevapların bazıları biraz dolambaçlı görünüyor, ama işte küçük bir hack.

<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'de iki seçenekten birini seçebilirsiniz:

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

});

​

demo: http://jsfiddle.net/5WFYt/

Yukarıdaki yanıtlara dayanarak, jQuery kullanılıyorsa, bu tüm girdiler için iyi bir çözüm olabilir:

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

Ben bazı form öğeleri salt okunur ayarlamak için Asp.Net MVC ile kullanıyorum. Yukarıdaki metin ve onay kutuları için, aşağıdaki senaryolar gibi üst kapsayıcıları .readonly olarak ayarlayarak çalışır:

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

"Engelli" nin kabul edilebilir bir cevap olmadığını biliyorum, çünkü op göndermek istiyor. Ancak, salt okunur seçeneği ayarladıysanız, daima sunucu tarafında EVEN değerlerini doğrulamanız gerekir. Bunun nedeni, kötü niyetli bir kullanıcının salt okunur özniteliğini kullanarak değer göndermesini durduramamanızdır.

Orijinal değeri (sunucu tarafı) saklamanızı ve devre dışı bırakmanızı öneririm. Ardından, formu gönderdiklerinde, gönderilen değerleri yok sayın ve sakladığınız orijinal değerleri alın.

Salt okunur bir değer gibi görünecek ve davranacaktır. Ve kötü niyetli kullanıcıların gönderilerini işler (yok sayar). Bir taşla 2 kuş öldürüyorsun.

ConroyP'nin cevabı hakkında yorum yapardım, ama bu sahip olmadığım 50 itibar gerektiriyor. Başka bir cevap gönderecek kadar itibarım var. Afedersiniz.

ConroyP'nin cevabındaki sorun, onay kutusunun sayfaya dahil edilmese bile değiştirilememesidir. Electrons_Ahoy çok fazla şart koymasa da, en iyi yanıt, değiştirilemez onay kutusunun, "devre dışı" özniteliği uygulandığında olduğu gibi, değiştirilebilir onay kutusuyla aynı görünmemesi olacaktır. Electrons_Ahoy'nin "devre dışı" özniteliğini kullanmak istememek için verdiği iki nedeni ele alan bir çözüm, "devre dışı" özniteliğini kullandığı için mutlaka geçersiz olmaz .

$ Boole ve $ devre dışı iki boole değişkenini varsayalım:

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

$ Check doğru ise onay kutusu işaretli olarak görüntülenir. $ Check yanlışsa onay kutusu işaretlenmemiş olarak görüntülenir. Kullanıcı, yalnızca $ devre dışı yanlışsa ve onay kutusunun durumunu değiştirebilir. "My_name" parametresi, kullanıcı tarafından onay kutusunun işareti kaldırıldığında veya kaldırılmadığında gönderilmez. "My_name = 1" parametresi, onay kutusu işaretlendiğinde kullanıcı tarafından gönderilir veya gönderilmez. Electrons_Ahoy'un aradığı şey bu.

Hayır, giriş onay kutuları salt okunur olamaz.

Ama bunları javascript ile salt okunur yapabilirsiniz!

Kullanıcının herhangi bir şekilde değiştirmesini engelleyerek, onay kutularının salt okunur olarak çalışmasını sağlamak için bu kodu istediğiniz zaman istediğiniz yere ekleyin.

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>

Bu komut dosyasını jQuery yüklendikten sonra istediğiniz zaman ekleyebilirsiniz.

Dinamik olarak eklenen öğeler için çalışır.

Sayfadaki herhangi bir öğede click olayını (değişiklik olayından önce gerçekleşir) alarak çalışır, daha sonra bu öğenin salt okunur bir onay kutusu olup olmadığını kontrol eder ve öyleyse değişikliği engeller.

Sayfanın performansını etkilememesi için çok fazla if var.

Sadece aşağıdaki gibi basit devre dışı etiketi kullanın.

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

alternatif bir fikir bir yer paylaşımı kullanmak ve salt okunur girişlerinizi örtmek

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

TÜM onay kutularınızın "kilitli" olmasını istiyorsanız, kullanıcı "salt okunur" öznitelik varsa "işaretli" durumu değiştiremezse, jQuery'yi kullanabilirsiniz:

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

Bu kodla ilgili harika bir şey, her onay kutusunu yeniden hatırlatmanıza gerek kalmadan kodunuzun her yerinde "salt okunur" özelliğini değiştirmenize izin vermesidir.

Radyo düğmeleri için de çalışır.

İnsanların salt okunur bir onay kutusu ve (salt okunur) bir radyo grubu istemelerinin temel nedeni, değiştirilemeyen bilgilerin kullanıcıya girildiği biçimde geri sunulabilmesidir.

Tamam devre dışı bırakılmış bunu yapar - maalesef devre dışı bırakılan kontroller klavyede gezinebilir değildir ve bu nedenle tüm erişilebilirlik mevzuatından etkilenir. Bu bildiğim HTML'deki BÜYÜK hangup.

Çok geç katkıda bulunuyorum ... ama yine de. Sayfa yüklenirken, seçili durum dışındaki tüm onay kutularını devre dışı bırakmak için jquery kullanın. Ardından, seçili olanı salt okunur olarak ayarlayın, böylece engelli olanlara benzer bir görünüme sahip olun. Kullanıcı değeri değiştiremez ve seçilen değer yine de gönderir.

Partiye çok geç ama MVC (5) için bir cevap buldum CheckBox devre dışı bırakıldı ve onay kutusunu ÖNCE bir HiddenFor ekledi, bu yüzden gönderirken Gizli alanı ilk bulur ve bu değeri kullanır. Bu işe yarıyor.

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

Ben salt okunur özniteliğini kullanırdım

<input type="checkbox" readonly>

Ardından etkileşimleri devre dışı bırakmak için CSS kullanın:

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

Sözde sınıf: salt okunur kullanımının burada çalışmadığını unutmayın.

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

Sadece müşterinin belirli koşullar altında bunları değiştirmesini istemiyorum.

READONLY kendisi çalışmaz. CSS ile korkak bir şey yapabilirsiniz, ancak genellikle onları devre dışı bırakırız.

UYARI: Eğer geri gönderilirlerse, müşteri bunları değiştirebilir, nokta. Bir kullanıcının bir şeyi değiştirmesini önlemek için salt okumaya güvenemezsiniz. Her zaman kemancı kullanabilir veya sadece html w / firebug veya benzeri bir şeyi değiştirebilir.

Benim çözümüm aslında FlySwat'ın çözümünün tersidir, ancak durumunuz için işe yarayıp yaramayacağından emin değilim. Onay kutuları bir grup var ve her formu (bir tablo için filtre ayarlarını değiştirmek için kullanılır) gönderen bir onClick işleyicisi vardır. Birden fazla tıklamaya izin vermek istemiyorum, çünkü ilk tıklamanın ardından gelen tıklamalar yok sayılıyor. Bu nedenle, ilk tıklamanın ardından ve formu gönderdikten sonra tüm onay kutularını devre dışı bırakıyorum:

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

Onay kutuları "filtreler" kimliğine sahip bir yayılma elemanındadır - kodun ikinci kısmı, onay kutularından yinelenen ve her birini devre dışı bırakan bir jQuery ifadesidir. Bu şekilde, onay kutusu değerleri yine de form aracılığıyla gönderilir (form devre dışı bırakılmadan önce gönderildiği için) ve sayfa yeniden yüklenene kadar kullanıcının bunları değiştirmesini önler.