使用 jQuery 禁用 html 表单元素的正确方法

Question

我有以下代码通过名为 data-button-day 的 HTML5 数据属性查找按钮元素，该属性具有星期几的值。

例如

<button type="button" data-button-day="sunday" class="btn btn-danger btn-block sunday">

我想做的是，当单击按钮时，所有数据属性为 data-day="dayOfWeek" 的元素都被禁用或根据按钮的 class 启用。

<script>
// this finds the correct button and works as expected

    $( "button" ).click(function() {
        $( this ).toggleClass( "btn-default btn-danger" );
        var day = $(this).data("button-day");
        toggle(day);
    });

this is called, however it produces an error as it isn't the right code to use

    function toggle(day) {
        $('[data-day="' + day + '"]').each().disabled();
    }
</script>

我明白了

TypeError: undefined is not an object (evaluating 'b.call')

Answer 1

您不需要 .each() 并且 each 需要参数。另外，从您的选择器中删除 "div"。

要获得切换行为，只需 add/remove 禁用 class。

$("button").click(function () {
    $(this).toggleClass("btn-default btn-danger");
    var day = $(this).data("button-day");
    var isDisabled = $(this).hasClass("disabled");
    if (isDisabled) {
        $(this).removeClass("disabled");
    }
    else {
        $(this).addClass("disabled");
    }
    toggle(day, !isDisabled);
});


function toggle(day, disabled) {
    $('[data-day = "' + day + '"]').prop("disabled", disabled);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" data-button-day="sunday" class="btn btn-danger btn-block sunday">Sunday</button>
<input type="text" data-day="sunday" />
<input type="text" data-day="monday" />

Answer 2

我已经修改了你的代码，因为我的按钮被禁用并保持这种状态。

我会把它留在这里以备将来参考。

<script>
    $("button").click(function () {
        $(this).toggleClass("btn-default btn-danger");
        var day = $(this).data("button-day");
        var isDisabled = $(this).hasClass("btn-danger");
        toggle(day, isDisabled);
    });

    function toggle(day, disabled) {
        $('[data-day = "' + day + '"]').prop("disabled", disabled);
    }
</script>

使用 jQuery 禁用 html 表单元素的正确方法

Correct way to disable html form elements using jQuery

html

css

jquery

button