jQuery的添加和删除禁用属性

麦金森

我有一些复选框和文本输入。页面加载时,文本输入被禁用。如果选中了复选框,则相应的输入应该是可填写的。这是我当前的代码

由于某种原因,我似乎无法正确处理它,我对JS和Jquery还是很陌生。当我单击复选框时,什么也没有发生,并且当我加载页面时,得到的文本是“ false”的6倍。

    var c1 = $('#check1');
    var c2 = $('#check2');
    var c3 = $('#check3');

    var f1 = $('#field1');
    var f2 = $('#field2');
    var f3 = $('#field3');

    $(function() {
        enable_cb(c1, f1);
        enable_cb(c2, f2);
        enable_cb(c3, f3);

        c1.click(enable_cb(c1, f1));
        c2.click(enable_cb(c2, f2));
        c3.click(enable_cb(c3, f3));
    });


    function enable_cb(checkbox, field) {
        if (checkbox.checked) {
            console.log('if');
            field.removeAttr("disabled");
        } else {
            console.log('else');
            field.attr("disabled", true);
        }
    }

这是一段html,其他部分与此相同:

<div class="form-group" >
    <label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect customcheckbox" for="check1">
        {{ Form::checkbox('check', 1, null, ['class' => 'mdl-checkbox__input', 'id' => 'check1']) }}
        <span class="mdl-checkbox__label">test</span>
    </label>
</div>
<div class="form-group" >
    <label for="field1">test<br></label>
    <select id="field1" name="field1" disabled class="searchselect searchselectstyle">
    </select>
    @if ($errors->has('field1'))
        <span class="help-block">
            <strong>{{ $errors->first('field1') }}</strong>
        </span>
    @endif
</div>
罗里·麦克罗森(Rory McCrossan)

你有几个问题。

  • change在处理复选框时,应使用该事件,以便使用键盘进行导航的人员可以使用它们。
  • 您应该为事件处理程序提供匿名函数。您当前的代码将立即执行该enable_cb()函数,然后忽略任何其他事件。
  • checkbox传递给函数参数是没有checked属性的jQuery对象您应该is(':checked')改用。
  • 您应该使用prop()attr()removeAttr()在可能的情况。

试试这个:

$(function() {
    enable_cb(c1, f1);
    enable_cb(c2, f2);
    enable_cb(c3, f3);

    c1.change(function() {
        enable_cb(c1, f1)
    });
    c2.change(function() {
        enable_cb(c2, f2)
    });
    c3.change(function() {
        enable_cb(c3, f3)
    });
});

function enable_cb(checkbox, field) {
    if (checkbox.is(':checked')) {
        console.log('if');
        field.prop("disabled", false);
    } else {
        console.log('else');
        field.prop("disabled", true);
    }
}

工作实例

就是说,您应该真正考虑将代码干燥以减少重复。确切的操作方式取决于您的HTML结构,但这是一个示例。

<div class="checkbox-group">
    <input type="checkbox" id="check" />
    <input type="text" id="subcomplex"/>
</div>
<div class="checkbox-group">
    <input type="checkbox" id="yearlymanagermaintainancedayscheck" />
    <input type="text" id="yearlymanagermaintainancedays" />
</div>
<div class="checkbox-group">
    <input type="checkbox" id="yearlysuppliermaintainancedayscheck" />
    <input type="text" id="yearlysuppliermaintainancedays" />
</div>
$('.checkbox-group :checkbox').change(function() {
    $(this).siblings('input').prop('disabled', !this.checked);
}).change();

工作实例

请注意,后一个版本的代码要简单得多,并且无论input您向HTML中添加了多少元素,JS都将不需要更新或维护

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

使用jQuery删除和添加属性ID

来自分类Dev

使用jQuery添加和删除属性

来自分类Dev

添加禁用属性,从而在jquery中永久删除点击事件?

来自分类Dev

添加和删除jQuery类

来自分类Dev

添加和删除锚点属性

来自分类Dev

JavaScript中的添加和删除属性

来自分类Dev

如何使用jQuery onchange事件在HTML中添加和删除属性?

来自分类Dev

如何使用 jquery 添加和删除具有属性的输入元素

来自分类Dev

从jQuery中的HTML对象中删除禁用的属性

来自分类Dev

使用jQuery添加,复制和删除元素

来自分类Dev

使用jQuery单击添加和删除类?

来自分类Dev

使用jQuery动态添加和删除行

来自分类Dev

动态添加和删除JQuery / JavaScript

来自分类Dev

jQUERY分别添加和删除类

来自分类Dev

jQuery添加和删除div的多个类

来自分类Dev

滚动时jQuery添加和删除类

来自分类Dev

在jQuery中添加和删除类

来自分类Dev

使用按钮jquery添加和删除div

来自分类Dev

jQuery CheckBoxes价格添加和删除

来自分类Dev

jQuery添加和删除取消绑定

来自分类Dev

使用jQuery添加和删除类

来自分类Dev

使用jQuery单击添加和删除类?

来自分类Dev

动态添加和删除<input> jQuery

来自分类Dev

使用jQuery动态添加和删除表列

来自分类Dev

使用jQuery添加和删除输入字段

来自分类Dev

jQuery toggle()添加和删除类

来自分类Dev

jQuery动态添加和删除元素

来自分类Dev

使用jQuery添加和删除链接

来自分类Dev

使用 jQuery 添加和删除类