Formulaire HTML readonly balises SELECT/input

Vous devriez garder la select élément disabled mais aussi ajouter un autre caché input avec le même nom et la valeur.

Si vous réactivez votre SÉLECTIONNEZ, vous devez copier sa valeur à l'caché dans un événement onchange et de désactiver (ou supprimer) le caché d'entrée.

Voici une démo:

JS:

$('#mainform').submit(function() {
    $('#formdata_container').show();
    $('#formdata').html($(this).serialize());
    return false;
});

$('#enableselect').click(function() {
    $('#mainform input[name=animal]')
        .attr("disabled", true);
    
    $('#animal-select')
        .attr('disabled', false)
    	.attr('name', 'animal');
    
    $('#enableselect').hide();
    return false;
});

CSS:

#formdata_container {
    padding: 10px;
}

HTML:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
    <form id="mainform">
        <select id="animal-select" disabled="true">
            <option value="cat" selected>Cat</option>
            <option value="dog">Dog</option>
            <option value="hamster">Hamster</option>
        </select>
        <input type="hidden" name="animal" value="cat"/>
        <button id="enableselect">Enable</button>
        
        <select name="color">
            <option value="blue" selected>Blue</option>
            <option value="green">Green</option>
            <option value="red">Red</option>
        </select>

        <input type="submit"/>
    </form>
</div>

<div id="formdata_container" style="display:none">
    <div>Submitted data:</div>
    <div id="formdata">
    </div>
</div>

Vous pouvez ré-activer l'objet select sur "soumettre".

MODIFIER: c'est à dire, normalement, la désactivation de la balise select (avec les personnes handicapées de l'attribut), puis de le réactiver automatiquement juste avant l'envoi du formulaire:

Exemple avec jQuery:

• Pour le désactiver:

  $('#yourSelect').prop('disabled', true);

• Pour l'activer de nouveau avant la soumission de sorte que GET /POST données est inclus:

  $('#yourForm').on('submit', function() {
      $('#yourSelect').prop('disabled', false);
  });

En outre, vous pouvez ré-activer tous les handicapés d'entrée ou sélectionnez:

$('#yourForm').on('submit', function() {
    $('input, select').prop('disabled', false);
});

<select id="countries" onfocus="this.defaultIndex=this.selectedIndex;" onchange="this.selectedIndex=this.defaultIndex;">
<option value="1">Country1</option>
<option value="2">Country2</option>
<option value="3">Country3</option>
<option value="4">Country4</option>
<option value="5">Country5</option>
<option value="6">Country6</option>
<option value="7" selected="selected">Country7</option>
<option value="8">Country8</option>
<option value="9">Country9</option>
</select>

Testé et de travail dans IE 6, 7 & 8b2, Firefox 2 & 3, Opera 9.62, Safari 3.2.1 pour Windows et Google Chrome.

CSS Simple solution:

select[readonly]{
    background: #eee;
    cursor:no-drop;
}

select[readonly] option{
    display:none;
}

Il en résulte choisir d'être gris, avec de belles "désactiver" curseur sur le vol stationnaire

et sur sélectionner la liste des options est "vide" donc, vous ne pouvez pas modifier sa valeur.

C'est la meilleure solution que j'ai trouvé:

$("#YourSELECTIdHere option:not(:selected)").prop("disabled", true);

Le code ci-dessus désactive toutes les autres options qui ne sont pas sélectionnés, tout en gardant l'option sélectionnée est activée. Faire le choix de l'option rendra dans l'après-back de données.

Je sais que c'est beaucoup trop tard, mais il peut être fait avec CSS simple:

select[readonly] option, select[readonly] optgroup {
    display: none;
}

Le style cache toutes les options et les groupes lorsque la sélection est en readonly de l'état, de sorte que l'utilisateur ne peut pas modifier sa sélection.

Pas de JavaScript hacks nécessaire.

Définir l'sélectionnez désactivé lorsque vous plan pour qu'il soit en lecture seule, puis retirez le désactivé attribut juste avant de soumettre le formulaire.

//global variable to store original event/handler for save button
var form_save_button_func = null;
//function to get jQuery object for save button
function get_form_button_by_id(button_id) {
return jQuery("input[type=button]#"+button_id);
}
//alter value of disabled element
function set_disabled_elem_value(elem_id, value)  {
jQuery("#"+elem_id).removeAttr("disabled");
jQuery("#"+elem_id).val(value);
jQuery("#"+elem_id).attr('disabled','disabled');
}
function set_form_bottom_button_save_custom_code_generic(msg) {
//save original event/handler that was either declared
//through javascript or html onclick attribute
//in a global variable
form_save_button_func = get_form_button_by_id('BtnSave').prop('onclick'); //jQuery 1.6
//form_save_button_func = get_form_button_by_id('BtnSave').prop('onclick'); //jQuery 1.7
//unbind original event/handler (can use any of following statements below)
get_form_button_by_value('BtnSave').unbind('click');
get_form_button_by_value('BtnSave').removeAttr('onclick');
//alternate save code which also calls original event/handler stored in global variable
get_form_button_by_value('BtnSave').click(function(event){
event.preventDefault();
var confirm_result = confirm(msg);
if (confirm_result) {
if (jQuery("form.anyForm").find('input[type=text], textarea, select').filter(".disabled-form-elem").length > 0) {
jQuery("form.anyForm").find('input[type=text], textarea, select').filter(".disabled-form-elem").removeAttr("disabled");
}
//disallow further editing of fields once save operation is underway
//by making them readonly
//you can also disallow form editing by showing a large transparent
//div over form such as loading animation with "Saving" message text
jQuery("form.anyForm").find('input[type=text], textarea, select').attr('ReadOnly','True');
//now execute original event/handler
form_save_button_func();
}
});
}
$(document).ready(function() {
//if you want to define save button code in javascript then define it now
//code below for record update
set_form_bottom_button_save_custom_code_generic("Do you really want to update this record?");
//code below for new record
//set_form_bottom_button_save_custom_code_generic("Do you really want to create this new record?");
//start disabling elements on form load by also adding a class to identify disabled elements
jQuery("input[type=text]#phone").addClass('disabled-form-elem').attr('disabled','disabled');
jQuery("input[type=text]#fax").addClass('disabled-form-elem').attr('disabled','disabled');
jQuery("select#country").addClass('disabled-form-elem').attr('disabled','disabled');
jQuery("textarea#address").addClass('disabled-form-elem').attr('disabled','disabled');
set_disabled_elem_value('phone', '123121231');
set_disabled_elem_value('fax', '123123123');
set_disabled_elem_value('country', 'Pakistan');
set_disabled_elem_value('address', 'address');
}); //end of $(document).ready function

Une simple approche côté serveur est d'enlever toutes les options à l'exception de celui que vous souhaitez être sélectionné. Ainsi, dans le Zend Framework 1.12, si $element est un Zend_Form_Element_Select:

 $value =  $element->getValue();
$options = $element->getAttrib('options');
$sole_option = array($value => $options[$value]);
$element->setAttrib('options', $sole_option);

Solution avec tabindex. Fonctionne avec les sélectionner, mais également des saisies de texte.

Il suffit d'utiliser une .désactivé classe.

CSS:

.disabled {
pointer-events:none; /* No cursor */
background-color: #eee; /* Gray background */
}

JS:

$(".disabled").attr("tabindex", "-1");

HTML:

<select class="disabled">
<option value="0">0</option>
</select>
<input type="text" class="disabled" />

---

Edit: Avec Internet Explorer, vous devez également à ce JS:

$(document).on("mousedown", ".disabled", function (e) {
e.preventDefault();
});

J'ai résolu avec jquery:

      $("select.myselect").bind("focus", function(){
if($(this).hasClass('readonly'))
{
$(this).blur();   
return;
}
});

Ce que j'ai trouvé fonctionne très bien, avec du javascript (c'est à dire: pas de bibliothèque JQuery requis), est de changer le innerHTML de la <select> tag souhaité à l'unique valeur restante.

Avant:

<select name='day' id='day'>
<option>SUN</option>
<option>MON</option>
<option>TUE</option>
<option>WED</option>
<option>THU</option>
<option>FRI</option>
<option>SAT</option>
</select>

Exemple De Code Javascript:

document.getElementById('day').innerHTML = '<option>FRI</option>';

Après:

<select name='day' id='day'>
<option>FRI</option>
</select>

De cette manière, aucun visiual effet de changement, et ce sera POST/GET intérieur de la <FORM>.

html solution:

<select onfocus="this.blur();">

javascript: les

selectElement.addEventListener("focus", selectElement.blur, true);
selectElement.attachEvent("focus", selectElement.blur); //thanks, IE

à supprimer:

selectElement.removeEventListener("focus", selectElement.blur, true);
selectElement.detachEvent("focus", selectElement.blur); //thanks, IE

edit: ajout de méthodes de suppression

<select id="case_reason" name="case_reason" disabled="disabled">

disabled="disabled" ->obtenez votre valeur à partir de la base de données dan l'afficher dans le formulaire.
readonly="readonly" ->vous pouvez modifier votre valeur dans selectbox, mais votre valeur ne peut pas enregistrer dans votre base de données.

Ci-dessous a fonctionné pour moi :

$('select[name=country]').attr("disabled", "disabled"); 

Dans IE j'ai été en mesure de vaincre le onfocus=>onblur approche en double-cliquant.
Mais se souvenant de la valeur et de la restauration dans l'événement onchange semble gérer cette question.

<select onfocus="this.oldvalue=this.value;this.blur();" onchange="this.value=this.oldvalue;">
....
</select>

Vous pouvez faire la même sans expando propriétés à l'aide d'une variable javascript.

 var selectedOpt;//initialisation var 
var newIdForHidden;//initialisation var 
$('.disabledOnEdit').focusin(function(){ 
selectedOpt = $(this).find(":selected").val(); 
newIdForHidden = $(this).attr('id')+'Hidden'; 
//alert(selectedOpt+','+newIdForHidden); 
$(this).append("); 
$(this).find('input.hiddenSelectedOpt').attr('id',newIdForHidden).val(selectedOpt); 
}); 
$('.disabledOnEdit').focusout(function(){ 
var oldSelectedValue=$(this).find('input.hiddenSelectedOpt').val(); 
$(this).val(oldSelectedValue); 
}); 

très simple. Premier magasin de la valeur dans la variable. Puis sur modifier l'événement réglez la valeur stockée la variable qui contient la valeur initiale de

J'ai un dont le nom est la cartographie. Alors mon code sera comme suit;

$("document").ready(function(){ 
var mapping=$("select[name=mapping]").val();
$("select[name=mapping]").change(function(){
$("select[name=mapping]").val(mapping);
});
});

Je sais que cela ne va pas aider tout le monde (si vous êtes du côté client uniquement), mais aidera certains qui sont de la pile et avoir le contrôle de backend à l'avant.

Si un utilisateur n'a pas de privilège pour modifier un champ, j'ai seulement le retour de la sélection courante de la liste déroulante.

Ici est une partie de mon backend contrôleur:

        #region Prepare Action Priviledges
editAuditVM.ExtAuditEditRoleMatrixVM = new ExtAuditEditRoleMatrixVM
{
CanEditAcn = _extAuditEditRoleMatrixHelper.CanEditAcn(user, audit),
CanEditSensitiveDesignation = _extAuditEditRoleMatrixHelper.CanEditSensitiveDesignation(user, audit),
CanEditTitle = _extAuditEditRoleMatrixHelper.CanEditTitle(),
CanEditAuditScope = _extAuditEditRoleMatrixHelper.CanEditAuditScope(user, audit)
};
#endregion
#region Prepare SelectLists for Drop Downs
#region AuditScope List
IQueryable<SelectListItem> auditScopes = _auditTypesRepo.AuditTypes
.Where(at => at.AuditTypeClassCode.ToLower() == "e")
.Select(at => new SelectListItem
{ Text = at.AuditTypeText, Value = at.AuditTypeID.ToString() });
//Cannot make a select readonly on client side.
// So only return currently selected option.
if (!editAuditVM.ExtAuditEditRoleMatrixVM.CanEditAuditScope)
{
auditScopes = auditScopes
.Where(ascopeId => ascopeId.Value == editAuditVM.ExternalAudit.AuditTypeID.ToString());
}
#endregion
#endregion

Dans une option que vous pouvez utiliser disabled="disabled", au lieu de le sélectionner lui-même