Yii2:如何用 jQuery 制作 <div> disabled/readonly
Yii2: how to make a <div> disabled/readonly with jQuery
我需要禁用或只读Yii2框架下yii2-date-picker-widget的图标
日期选择器小部件有两部分:<span>
图标和 <input>
日期。我可以使用 jQuery 禁用 <input>
但我不能 <span>
.
这是 jQuery 代码:
$("#movements-vencimiento").prop("disabled", true); // Works.
$("#vencimientoDiv").prop("disabled", true) // Not works.
这是 Yii2 代码:
<div class="col col-md-4" id="vencimientoDiv">
<?= $form->field($model, 'vencimiento')->widget(\common\widgets\DatePicker::className(), [
'convertFormat' => true,
'pluginOptions' => [
'format' => 'dd/mm/yyyy',
'autoclose' => true,
'language' => 'es-AR',
'todayHighlight' => 'true',
]
]) ?>
</div>
这是 HTML 生成的代码:
<div id="vencimientoDiv">
<div class="form-group field-movements-vencimiento">
<label class="control-label" for="movements-vencimiento">Vencimiento</label>
<div class="input-group date">
<span class="input-group-addon">
<i class="fa fa-calendar"></i>
</span>
<input type="text" id="movements-vencimiento" class="form-control" name="Movements[vencimiento]" disabled="">
</div>
<div class="help-block"></div>
</div>
</div>
A div 没有 disabled
属性。您可以做的是删除导致日历显示的事件处理程序,如下所示:
$("#vencimientoDiv *").off();
就这么简单。
您正在寻找的是适用于所有元素的 pointerEvents
,您可以在需要时禁用和启用点击返回。
查看下面的简单演示
$("#clicker").on('click', function(e) {
e.preventDefault();
alert("clicked");
});
$("#disab").on('click', function() {
$("#clicker").css({
pointerEvents: 'none'
});
})
$("#enab").on('click', function() {
$("#clicker").css({
pointerEvents: 'auto'
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#." id="clicker">click me</a>
<input type="button" value="Disable Click" id="disab">
<input type="button" value="enable Click" id="enab">
因此在您的情况下,您将编写以下内容以禁用
$("#vencimientoDiv").css({pointerEvents:'none'});
然后使用
启用返回
$("#vencimientoDiv").css({pointerEvents:'auto'});
我需要禁用或只读Yii2框架下yii2-date-picker-widget的图标
日期选择器小部件有两部分:<span>
图标和 <input>
日期。我可以使用 jQuery 禁用 <input>
但我不能 <span>
.
这是 jQuery 代码:
$("#movements-vencimiento").prop("disabled", true); // Works.
$("#vencimientoDiv").prop("disabled", true) // Not works.
这是 Yii2 代码:
<div class="col col-md-4" id="vencimientoDiv">
<?= $form->field($model, 'vencimiento')->widget(\common\widgets\DatePicker::className(), [
'convertFormat' => true,
'pluginOptions' => [
'format' => 'dd/mm/yyyy',
'autoclose' => true,
'language' => 'es-AR',
'todayHighlight' => 'true',
]
]) ?>
</div>
这是 HTML 生成的代码:
<div id="vencimientoDiv">
<div class="form-group field-movements-vencimiento">
<label class="control-label" for="movements-vencimiento">Vencimiento</label>
<div class="input-group date">
<span class="input-group-addon">
<i class="fa fa-calendar"></i>
</span>
<input type="text" id="movements-vencimiento" class="form-control" name="Movements[vencimiento]" disabled="">
</div>
<div class="help-block"></div>
</div>
</div>
A div 没有 disabled
属性。您可以做的是删除导致日历显示的事件处理程序,如下所示:
$("#vencimientoDiv *").off();
就这么简单。
您正在寻找的是适用于所有元素的 pointerEvents
,您可以在需要时禁用和启用点击返回。
查看下面的简单演示
$("#clicker").on('click', function(e) {
e.preventDefault();
alert("clicked");
});
$("#disab").on('click', function() {
$("#clicker").css({
pointerEvents: 'none'
});
})
$("#enab").on('click', function() {
$("#clicker").css({
pointerEvents: 'auto'
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#." id="clicker">click me</a>
<input type="button" value="Disable Click" id="disab">
<input type="button" value="enable Click" id="enab">
因此在您的情况下,您将编写以下内容以禁用
$("#vencimientoDiv").css({pointerEvents:'none'});
然后使用
启用返回$("#vencimientoDiv").css({pointerEvents:'auto'});