Question

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

出于某种原因，我似乎无法做到正确，我对JS和Jquery很新。当我单击复选框时，没有任何反应，当我加载页面时，我得到6次文本“false”

    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>

Answer 1

你有几个问题。

处理复选框时应使用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);
    }
}

Working example

那就是说，你应该真的想要干掉你的代码以减少重复。具体如何执行此操作取决于您的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();

Working example

请注意，对于后一版本，代码的简化程度要轻得多，以及无论您向HTML添加多少input个元素，JS都不需要更新或维护。

Answer 2

如果您需要使用jQuery切换属性，可以使用prop()函数，您可以使用该函数切换disabled属性：

$(yourElement).prop('disabled',!checkbox.checked);

在你的情况下可能看起来像：

function enable_cb(checkbox, field) {
    $(field).prop('disabled',!checkbox.checked);
}

Jquery添加和删除禁用属性

2 个答案: