复选框不启用字段敲除答案

【问题标题】：Checkbox doesn't enable fields Knockout复选框不启用字段敲除
【发布时间】：2021-01-13 01:13:43
【问题描述】：

当检查“ setAlarmValues”时，我正在尝试为“ SetoutputCurrentPpplowValue”和“ SetoutputcurrentPpphighValue”设置为true。对于这个问题，我有以下代码：

这些字段在页面加载时被禁用，但当“SetAlarmValues”被选中时，它们保持禁用状态。我不确定为什么。请帮忙！

  <!-- ko if: $root.regData -->
     <div class="row">
                <div class="col-md-2">
                    <label for="SetAlarmValues" class="control-label">@MSL.Core.Resource.Models.Well.SetAlarmValues:</label>
                    <input type="checkbox" data-bind="checked: $root.regData().setAlarmValues" class="large-check registration" id="SetAlarmValuesCheck" title="@MSL.Core.Resource.Models.Well.SetAlarmValues" />
    
                </div>
               
            </div>
    
            <div class="col-md-6">
                <div class="row">
                    <div class="col-md-3">
                        <label for="SetOutputCurrentPP" class="control-label">Set Output Current PP:</label>
                    </div>
                </div>
    
                <div class="row">
                    <div class="col-md-1">                    
                    </div>
                    <div class="col-md-5 form-inline">
                        <label for="SetOutputCurrentPPLowValue" class="control-label">@MSL.Core.Resource.Models.Well.OutputCurrentPPLowValue: </label>&nbsp;
    
                        <input type="checkbox" data-bind="checked: $root.regData().setOutputCurrentPPLowValue, enable:  $root.regData().setAlarmValues()" class="large-check registration" id="SetOutputCurrentPPLowValue" title="@MSL.Core.Resource.Models.Well.SetOutputCurrentPPLowValue" />
                        <input type="text" id="OutputCurrentPPLowValue" data-bind="value: $root.regData().outputCurrentPPLowValue, enable: $root.regData().setOutputCurrentPPLowValue" class="form-control" maxlength="30" />
    
                    </div>
                </div>
                <br />
    
                <div class="row">
                    <div class="col-md-1">
                    </div>
                    <div class="col-md-5 form-inline">
                        <label for="SetOutputCurrentPPHighValue" class="control-label">@MSL.Core.Resource.Models.Well.OutputCurrentPPHighValue:</label>
    
                        <input type="checkbox" data-bind="checked: $root.regData().setOutputCurrentPPHighValue, enable: $root.regData().setAlarmValues()" class="large-check registration" id="SetOutputCurrentPPHighValue" title="@MSL.Core.Resource.Models.Well.SetOutputCurrentPPHighValue" />
                        <input type="text" id="OutputCurrentPPHighValue" data-bind="value: $root.regData().outputCurrentPPHighValue, enable: $root.regData().setOutputCurrentPPHighValue" class="form-control" maxlength="30" />
    
                    </div>
                </div>
            </div>

         <!-- /ko -->

这是脚本：


function Registration() {
    var self = this;
    //Alarms
    self.setAlarmValues = ko.observable(false);
    self.setOutputCurrentPPLowValue = ko.observable(false);
    self.setOutputCurrentPPHighValue = ko.observable(false);
    self.outputCurrentPPLowValue = ko.observable("");
    self.outputCurrentPPHighValue = ko.observable("");

}



var registerVM = function (countryListJSON, companyListJSON, wellStatusListJSON, territoryListJSON) {
    self = this;

    self.validation = ko.observableArray([]);
    self.savingData = ko.observable(false);
    self.regData = ko.observable(new Registration());
}

【问题讨论】：

使用with绑定去掉多余的代码。代码看起来不错，如果你能提供一个工作示例（小提琴）很乐意提供帮助。
@supercool 我已经对上面的代码做了一些修改，它正在工作。但在 Visual Studio 中并非如此。很烦人。问题是with 将隐藏我所知道的所有内容，但我希望它显示但仅在选中复选框时启用。这是小提琴：link
@supercool 我尝试使用with 绑定，它再次适用于小提琴，但不适用于我的！我不知道出了什么问题。这是此绑定的小提琴：link
VS 与问题无关。仍然 with 未正确使用请参阅此 jsfiddle.net/8vwqzjnh 。 with 创建了孩子们可以参考的新上下文。
@supercool 也没有用。所以我尝试使用 iCheck。这是小提琴：link 但由于某种原因，这是唯一不能在小提琴中工作但它实际上在我的本地工作的代码。

标签： checkbox knockout.js isenabled

【解决方案1】：

在您的代码中，我看到此语句 - 启用：$root.regData().setAlarmValues()，并且 setAlarmValues 值设置为 false。只有将字段 setAlarmValues 的值设置为 true 后才会启用。但是正如您提到的，一旦选中该复选框，请确保检查该值是否仍然为 false 或者是否已更改为 True。

【讨论】：

我添加了一个控制台日志，当我选中复选框时，值没有改变。我不知道为什么。
像这样更新你的数据绑定 data-bind="checked: $root.regData().setAlarmValues, click: UpdateValue, clickBubble: false"。并将以下内容添加到您的模型 self.UpdateValue= (item) => { event.stopPropagation();返回真； };
这也不起作用。我也试过event: {change: $root.setChanged} & self.setChanged = function () { self.regData().setAlarmValues(true); }，但也没有用。一切都在小提琴中有效，但在 VS 中无效。
您是否已将此（clickBubble: false）添加到您的 dat-bind 中？？
是的，我有。唯一有效的是当我尝试使用 iCheck 时。这是小提琴：link，但由于某种原因，这是唯一不能在小提琴中工作的代码，但它实际上在我的本地工作。