Question

我有一个表格，其中有三个字段和两个按钮。的 FIDDLE

点击添加可选电子邮件地址按钮会添加一个新的电子邮件字段，这很好。我的问题是保存按钮。我希望保存按钮保持禁用状态，直到用户单击该字段或在输入字段中添加任何值。所以，

如果用户点击任何输入字段，保存按钮将变为活性
如果用户输入值，它将保持活动状态。
如果用户点击输入但未提供任何值，则会更改再次禁用。

添加可选电子邮件地址

的新添加输入相同

在我的代码中，如果在单击后没有为输入提供值并且不为新添加的输入工作，则不会返回到禁用状态。我不确定原因。任何帮助都会节省我的一天。

JS

$("body").on('focus', '.user-input input', function() {  
   $(".update-change").removeAttr('disabled');
}).blur(function() {
    if ($("").val() == '') {
        $(".update-change").attr('disabled', 'disabled');
    }
});

$('.update-list-confirm').click(function(){
    $(".update-change").attr('disabled', 'disabled');
});


// Add email
$("body").on('click', '.add-new-email', function() {
    var newemail = '<div class="form-group"><em class="pull-right">Optional</em><input type="email" name="userEmail" class="form-control" id="" placeholder="mymail@mail.com"></div>';

$(newemail).insertBefore(this);     
});

Answer 1

这是一个错字吗？使用正确的值更改它：

if ($("").val() == '') {

我想它应该是：

if ($('[name="userEmail"]').val() == '') {

Answer 2

尝试使用此方法处理同一输入元素上的模糊

$("body").on('focus', '.user-input input', function() {  
   $(".update-change").removeAttr('disabled');
}).on ('blur', '.user-input input', function() {
    if ($(this).val() === '') {
        $(".update-change").attr('disabled', 'disabled');
    }
});

Answer 3

如果任何文本字段为空，要禁用SAVE按钮，您应该使用以下代码片段：

$(':text').focusout(function () {
    $(':text').each(function (i) {
        if (this.value === '') {
            $('.update-change').attr('disabled', 'disabled');
        }
    });
});

这样，当点击SAVE按钮时（:text字段不再处于焦点位置）时，会检查每个:text字段的值。

有焦点和模糊功能的问题

3 个答案: