jquery/javascriptで親のdiv名のみを指定することによって、フォーム内のすべてのフィールド(textarea/textfield/option/input/checkbox/submitなど)を無効にする方法はありますか?
親セレクタと共に、 :input
セレクタを使用してみてください。
$("#parent-selector :input").attr("disabled", true);
$('#mydiv').find('input, textarea, button, select').attr('disabled','disabled');
$(document).ready(function () {
$('#chkDisableEnableElements').change(function () {
if ($('#chkDisableEnableElements').is(':checked')) {
enableElements($('#divDifferentElements').children());
}
else {
disableElements($('#divDifferentElements').children());
}
});
});
function disableElements(el) {
for (var i = 0; i < el.length; i++) {
el[i].disabled = true;
disableElements(el[i].children);
}
}
function enableElements(el) {
for (var i = 0; i < el.length; i++) {
el[i].disabled = false;
enableElements(el[i].children);
}
}
単にこのコード行はすべての入力要素を無効にします
$('#yourdiv *').prop('disabled', true);
下記の機能をいろいろなところで使っています。右セレクタが使用されている限り、テーブル内のdiv要素またはbutton要素で機能します。 ":button"だけでは再び有効にはなりません。
function ToggleMenuButtons(bActivate) {
if (bActivate == true) {
$("#SelectorId :input[type='button']").prop("disabled", true);
} else {
$("#SelectorId :input[type='button']").removeProp("disabled");
}
}
HTML属性 'disabled'のみを使用してこれを達成するのはどうですか。
<form>
<fieldset disabled>
<div class="row">
<input type="text" placeholder="">
<textarea></textarea>
<select></select>
</div>
<div class="pull-right">
<button class="button-primary btn-sm" type="submit">Submit</button>
</div>
</fieldset>
</form>
フィールドセットにdisabledと入力するだけで、そのフィールドセット内のすべてのフィールドが無効になります。
$('fieldset').attr('disabled', 'disabled');
以下は、すべての入力を無効にしますが、btnクラスに追加できず、disable cssを上書きするクラスも追加します。
$('#EditForm :input').not('.btn').attr("disabled", true).addClass('disabledClass');
cSSクラス
.disabledClass{
background-color: rgb(235, 235, 228) !important;
}
私のために私は同様に無効になったいくつかのASPネット隠しフィールドを持っていたので私は目に見えるフィールドを無効にすることだけを選んだので、受け入れられた答えはうまくいきませんでした
//just to save the list so we can enable fields later
var list = [];
$('#parent-selector').find(':input:visible:not([readonly][disabled]),button').each(function () {
list.Push('#' + this.id);
});
$(list.join(',')).attr('readonly', true);
Div要素を編集できないようにするには、CSSクラスを使用します。
CSS:
.divoverlay
{
position:absolute;
width:100%;
height:100%;
background-color:transparent;
z-index:1;
top:0;
}
JS:
$('#divName').append('<div class=divoverlay></div>');
またはHTMLタグにクラス名を追加してください。 Div Elementsを編集できなくなります。
テキストタイプのみ
$(".form-edit-account :input[type=text]").attr("disabled", "disabled");
パスワードタイプのみ
$(".form-edit-account :input[type=password]").attr("disabled", "disabled");
メールタイプのみ
$(".form-edit-account :input[type=email]").attr("disabled", "disabled");