出现值时禁用/启用按钮问题答案

【问题标题】：Disable/Enable button when a value appears issue出现值时禁用/启用按钮问题
【发布时间】：2020-01-12 16:48:35
【问题描述】：

我有输入字段，其中 3 个是只读的。我想检查其中一个只读的值。如果存在，则应启用提交按钮，如果不存在，则保持禁用状态。当值出现在字段actual_operation_date 中时，如何使函数工作。问题是我收到一个错误，表明我的功能不正确。

HTML

<div class="item form-group">
    <label for="ActuallOperationDate" class="control-label col-md-3">Actuall Operation Date</label>
    <div class="col-md-6 col-sm-6 col-xs-12">
        <input class="form-control col-md-7 col-xs-12" id="Actuall_Operation_Date" name="Actuall_Operation_Date" readonly />
    </div>
</div>

提交按钮

<button type="submit" value="Create" id="activeMe" class="btn btn-success" disabled>Submit</button>

Javascript

function activeMe() {
    var ac_opDate = $('#Actuall_Operation_Date').val();

    if (ac_opDate != null) {
        $('#activeMe').attr('disabled', 'disabled');
        //document.getElementById("activeMe").disabled = true;
    }
    else {
        $('#activeMe').removeAttr('disabled');
        // document.getElementById("activeMe").disabled = false;
    }
}

【问题讨论】：

我已经更新了下面帖子中的 JavaScript 函数，它可以按预期工作，希望对您有所帮助。

标签： javascript c# asp.net-mvc

【解决方案1】：

我认为代码是正确的，但不知道为什么会出错，请尝试下面的代码按预期工作。希望对你有帮助。

HTML

<div class="item form-group">
    <label for="ActuallOperationDate" class="control-label col-md-3">Actuall Operation Date</label>
    <div class="col-md-6 col-sm-6 col-xs-12">
        <input class="form-control col-md-7 col-xs-12" id="Actuall_Operation_Date" name="Actuall_Operation_Date" readonly />
    </div>
</div>

提交按钮

<button type="submit" value="Create" id="activeMe" class="btn btn-success" disabled>Submit</button>

Javascript

function activeMe() {
    var ac_opDate = $('#Actuall_Operation_Date').val();

    if (ac_opDate != null && ac_opDate.length > 0) {
        $('#activeMe').prop('disabled', false);
        //document.getElementById("activeMe").disabled = true;
    }
    else {
        $('#activeMe').prop('disabled', true);
        // document.getElementById("activeMe").disabled = false;
    }
}

【讨论】：

【解决方案2】：

如果您的字段是只读的并且其值发生变化，我猜您有一些更新该字段的过程。如果是，那么您可以为那些只读字段创建一个 onchange 事件，检查值，然后启用提交按钮。

例如：

 $('#Actuall_Operation_Date').on('change', function(){ 
  if($(this).val()==null || $(this).val()==''){
     $('#activeMe').prop('disabled', true);
  }else{
     $('#activeMe').prop('disabled', false);
   }
  })

如果你有一组字段，那么你可以使用类选择器来扩展所有字段的更改事件，而不是 id。

 $('.Actuall_Operation_Date').on('change', function(){ 
  if($(this).val()==null || $(this).val()==''){
     $('#activeMe').prop('disabled', true);
  }else{
     $('#activeMe').prop('disabled', false);
   }
  })

【讨论】：

【解决方案3】：

由于您的输入字段是只读的，因此输入的值会以编程方式在某个地方发生变化。（不同于手动输入）

即使这样，jquery 的 onchange 方法也会检测输入字段值的每次变化。因此，此输入（在所有输入字段（只读或非只读）上）和检测到启用/禁用提交按钮的任何更改时都可以有一个事件处理程序。

$('#Actuall_Operation_Date')[0].onchange = function () 
{
    if (this.value == '') {
        $('#activeMe').attr('disabled', 'disabled');
    }else {
        $('#activeMe').removeAttr('disabled');
    }
};

【讨论】：

虽然您的代码可能会提供问题的答案，但请为其添加上下文/解释，以便其他人了解它的作用以及它存在的原因。
感谢 Theo 的输入，我已经更新了答案。

【解决方案4】：

谢谢大家的回复?。我通过以下代码解决了它

 $('[name = "Actuall_Operation_Date"]').ready(function () {
                    var ac_opDate = $('#Actuall_Operation_Date').val();
                    if (ac_opDate == null) {
                        $('#activeMe').attr('disabled', 'disabled');

                    }
                    else {
                        $('#activeMe').removeAttr('disabled');

                    }
                })

但我仍然不知道为什么我之前的代码不起作用。

【讨论】：