Question

我有很多输入框，不同页面的密码类型。现在我有一个小复选框，显示“show password”，当它被选中时，将其从类型密码更改为文本。简单吧？

现在业内的一些天才已经决定，对于其中一个页面，他们喜欢按“说隐藏密码”的按钮。但仅限于那一页。现在理论上，这很好但但是当我在包含“隐藏密码”的页面上时，当我“取消选中”复选框时，该字段仅从类型文本更改为密码。即我必须点击两次。我怎么能绕过这个？我知道这很简单，但这让我很精神。

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);

    });

如果你尝试小提琴，你会明白我的意思。如果您使用第一个复选框，则只有在取消选中该复选框时，该字段才会“隐藏”。它适用于第二个。我做错了什么？

Answer 1

您应该可以在不同的输入中使用它：

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

<强> jsFiddle example

Answer 2

您已针对逆情况切换布尔逻辑。

$('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);

    });

如果添加！改变结果它按预期工作。

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

2 个答案: