web-dev-qa-db-fra.com

lecture seule div en CSS ou JavaScript

Je dois utiliser 'read-only div ' avec CSS, JavaScript ou Jquery. Pas seulement la zone de texte et tout. Complet div. Ce div contient n'importe quoi (image, autre div, zone de texte, ...)

Cela devrait supporter par tous les navigateurs. 

Une idée?

javascriptjquerycsshtmlreadonly
22
KarSho

Vous ne pouvez pas faire cela avec CSS, malheureusement, vous utilisez l'attribut readonly sur les éléments HTML. Vous pouvez très facilement accomplir ce que vous voulez en utilisant JavaScript, voici un exemple avec jQuery.

jsFiddle

HTML

<div class="readonly">
    <input type="text" />
    <div><input type="checkbox" /> Blah</div>
    <textarea>abc</textarea>
</div>

JavaScript

$(document).ready(function() {
    $('.readonly').find('input, textarea, select').attr('readonly', 'readonly');
});
5
Daniel Imms

J'ai bien peur que vous ne puissiez pas contrôler le comportement des éléments avec CSS.

CSS est l'acronyme de Cascading Style Sheets (feuilles de style en cascade). Il s'agit uniquement d'éléments de style.

Mais vous pouvez utiliser JavaScript.

Exemple jQuery non testé ci-dessus:

$('#myDiv').children().attr('readonly', true);
2
Edward Ruchevits

Essayez juste avec ce qui suit:

Partie de script:

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#previewDiv :input").attr("disabled", true); 
});
</script>

Partie HTML:

<div id="previewDiv">
<select>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
    <option value="4">Option 4</option>
</select>
<input type="text" name="test" value="test">
</div>

Je pense que cela peut vous aider à résoudre votre problème.

1
John Peter
$("div").prop("readonly", true);

<div> 
    <input type="text" value="value" /> <br />
    <textarea>value</textarea>
</div>
0
sairamch