标签: disabled-input

我有以下部分的html模板:

<div class="row">
    <div class="medium-3 columns">
        <label>Category
        <select [(ngModel)]="item.cat" name="cat" required>
            <option *ngFor="let a of categories" [ngValue]="a">{{a.name}}</option>
        </select>
        </label>
    </div>

    <div class="medium-3 columns">
        <label>Categoria
        <select [(ngModel)]="item.place" name="place" [disabled]="!item.cat">
            <option *ngFor="let c of places" [ngValue]="c">{{c.name}}</option>
        </select>
        </label>
    </div>
</div>

如您所见,第二个select被禁用,直到用户从第一个选择中选择一个选项.因此,如果用户从第一个选择中选择一个选项,则第二个选择变为活动状态.

现在我想将required属性添加到第二个选择.但如果我这样做,第二个select总是被禁用.

这种行为不是很奇怪吗？

这是Plunker(感谢Stefan Svrkota).

我在应用程序中启用和禁用表单控件时遇到麻烦。可能是因为表单是在异步上下文中启用/禁用的。

代码如下。

user.component.html

<form [formGroup]="form">
    <input type="text" id="name" formControlName="name" />
    <input type="text" id="age" formControlName="age" />
</form>

user.component.ts

ngOnInit() {

     this._route.queryParams.subscribe(params => {
            getUser(params.userId).subscribe(user => {
                 this._buildForm(user);
            })
     });
}

private _buildForm(user){
    this.form = _fb.group({
        name: [{value: user.name, disabled: user.someCondition}, Validators.required],
        age: [{value: user.age, disabled: user.anotherCondition}, Validators.required]
    })
}    

当用户第一次通过参数更改加载时，控件会根据其相关条件被启用/禁用。当参数随后更改时，尽管值已适当设置，但控件的状态保持不变。

我尝试了不同的方法来解决此问题，但没有帮助。例如，我在_buildForm方法末尾尝试了以下方法。

this.form.disable() //Doesn't do anything

this.form.controls.name.disable(); //Doesn't help

可以正常工作的一件事是以下内容（但这不是必需的）。

<button (click)="form.disable()" value="Disable Form" />
<button (click)="form.enable()" value="Enable Form" />

我的感觉是问题是由于_buildForm()从异步上下文（预订方法）调用了该事实。

我该如何解决这个问题？

更新

请注意，可观察订阅是基于以下导航触发的。

this._router.navigate([], {
   relativeTo: this._route, …

我正在尝试基于Blazor在Blazor中进行Enable/Disable一组time输入checkbox；对于inputs类型button，以下解决方案有效，对于类型的输入time则无效：

有效的按钮输入解决方案

<button type="button"
    class="@this.SetButton">
</button>

[Parameter] public bool state{get;set;} 
public string SetButton() {
       string result = state == true ? "" : "disabled";
       return result;
}

尝试输入无效的时间

<input bind="@IsDisabled" type="checkbox" />

<input class="@this.GetGroupState()"  type="time" />


 protected bool IsDisabled { get; set; }
 public string GetGroupState() {
            return this.IsDisabled ? "disabled" : "";
        }

PS在第一种情况下，bool它是另一个参数，component所以我不绑定它。但在第二种情况下，它必然会checkbox

我在Javascript和Jquery手机中创建了8个益智盒游戏.我已经完成了一个盒子,<input readonly></input>我把所有这些都放在9x9的桌子上.问题是,当我点击一个框来移动它时,即使它是只读的,移动设备也会尝试在其中写入并显示键盘.这不是我想要的......我想禁用输入或使用不同的东西<input>.我尝试使用disable ="disabled"但仍然无法正常工作.这是代码:

<form name="box">
    </center>
    <table align="center">
        <tr>
            <td ><input name="casella1" value="8" onClick="test(this.value)" readonly style="text-align: center; width:50px; height:50px; font-weight:bold; background-color: #C0C0C0; border-style: solid; border-color: black"></td>
            <td ><input name="casella2" value="5" onClick="test(this.value)" readonly style="text-align: center; width:50px; height:50px; font-weight:bold; background-color: #C0C0C0; border-style: solid; border-color: black"></td>
            <td ><input name="casella3" value="2" onClick="test(this.value)" readonly style="text-align: center; width:50px; height:50px; font-weight:bold; background-color: #C0C0C0; border-style: solid; border-color: black"></td>
        </tr>
        <tr>
            <td ><input name="casella4" value="6" onClick="test(this.value)" readonly style="text-align: center; width:50px; height:50px; font-weight:bold; background-color: #C0C0C0; border-style: …

我将summernote 编辑器放在我的Web 应用程序中。

而且我发现它仍然能够将拖放图像拖到编辑器区域中。当然我用下面的代码屏蔽了summernote的输入。（以下方法在summernote官网提供）

summernote.summernote('disable');
summernote.summernote({
    disableDragAndDrop : true
});

我还能尝试什么？

仅供参考，我已经初始化了我的夏季笔记，例如......

    var s_note = $('#${id}_summernote');

    var summernote = s_note.summernote({
        height : 200
        , dialogsInBody : true
        , toolbar: [
            ['style', ['style']],
            ['font', ['bold', 'italic', 'underline', 'clear']],
            ['fontname', ['fontname']],
            ['color', ['color']],
            ['para', ['ul', 'ol', 'paragraph']],
            ['height', ['height']],
            ['table', ['table']],
            ['insert', ['link', 'picture', 'hr']],
            ['view', ['fullscreen', 'codeview']],
            ['help', ['help']]
        ]
        , callbacks : {
            onImageUpload : function(files){
                console.log(files);
                var img = document.createElement('img');
                img.src='http://summernote.org/img/icons/1200x630.png';
                uploadWYSIWYGFile(files);

                s_note.summernote('insertNode', img);
            }
            , onChange : function(){ …

我正在尝试禁用输入字段（如果它有价值）。不知何故，它看起来像这样：

<input type="text" name="sex" value="{{ old('sex', $user['sex']) }}" placeholder="">

我尝试添加如下：

<input type="text" name="sex" value="{{ old('sex', $user['sex']) }}" 
  disabled= {{ $user['sex'] == null ? disabled :'' }}  >

但它不起作用。顺便说一句，我正在使用blade.php。

我真的很难找到这个边框颜色的定义位置。我已经检查了 dom，但在任何输入组件及其伪元素中都没有看到边框样式......

我只是想减轻输入边框的颜色以匹配我的主题禁用颜色。

这是我使用的代码和渲染。

 <OutlinedInput
      size='small'
      disabled={disabled}
      value={value}
      endAdornment={<InputAdornment position="end">{ctx.user.currency.short}</InputAdornment>}
      inputProps={{ style: { paddingBottom: 4, } }}
      style={{ fontWeight: 700, fontSize: 18 }}
      {...props}
    />

我尝试过使用<TextField />但它有同样的问题。请问你能帮帮我吗 ？