复选框的更改属性无法正常工作

Question

我有很多输入框，在不同的页面输入密码。现在我有一个小复选框，上面写着 "show password"，当它被选中时，将它从键入密码更改为文本。简单吧？

现在，一些业内天才决定，对于其中一个页面，他们希望按钮显示 "hide password"。但仅限于那一页。现在理论上，这工作正常但发生的是，当我在包含 "hide password" 的页面上时，该字段仅在我 "uncheck" 复选框时从类型文本更改为密码。即我必须点击两次。我该如何解决这个问题？我知道这很简单，但它让我精神错乱。

HTML:

<input type="checkbox" data-toggle-input="js-show-char-toggle" class="ml-small">Hide password
<input type="text" value="" class="js-show-char-toggle">

显示密码

jQuery:

$('input[data-toggle-input]').on('click', function() {
    var $self = $(this),
            inputToggleClass = $self.data('toggle-input'),
            inputType = $self.prop('checked') ? 'text' : 'password';        

        $('.' + inputToggleClass).prop('type', inputType);

    });

如果您尝试 fiddle，您就会明白我的意思。如果您使用第一个复选框，则当您取消选中该复选框时，该字段只会 "hide" 。它适用于第二个。我做错了什么？

Answer 1

您已将布尔逻辑切换为相反的情况。

$('input[data-toggle-input]').on('click', function() {

        var $self = $(this),
            inputToggleClass = $self.data('toggle-input'),
            inputType = !$self.prop('checked') ? 'text' : 'password';       

        $('.' + inputToggleClass).prop('type', inputType);

    });

如果您添加 !更改它按预期工作的结果。

Answer 2

您应该能够在不同的输入中使用它：

$('input[data-toggle-input]').on('click', function () {
    $(this).next().prop('type', $(this).next().prop('type') == 'text' ? 'password' : 'text')
});

jsFiddle example

复选框的更改属性无法正常工作

Change attribute for a checkbox not working correctly

html

javascript

checkbox

jquery