在jquery中引用包含数组名称的html输入字段

Question

我正在尝试使用javascript将输入字段从PASSWORD转换为TEXT。

如果字段ID是纯文本，但是当字段ID是数组时，我的代码可以正常工作。

(function($) {

  $.toggleShowPassword = function(options) {
    var settings = $.extend({
      field: "#password",
      control: "#toggle_show_password",
      eye: "#password_eye",
    }, options);

    var control = $(settings.control);
    var field = $(settings.field);
    var eye = $(settings.eye);
    control.bind('click', function() {
      if ($(settings.control).is(':checked')) {
        $(settings.field).attr('type', 'text');
        eye.removeClass('fa-eye');
        eye.addClass('fa-eye-slash');
      } else {
        eye.removeClass('fa-eye-slash');
        eye.addClass('fa-eye');
        $(settings.field).attr('type', 'password');
      }
    });
  };
}(jQuery));

$.toggleShowPassword({
  field: '#config_value[24]',
  control: '#show_password_config_value[24]',
  eye: '#password_eye_config_value[24]'
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link href="https://use.fontawesome.com/releases/v5.0.8/css/all.css" rel="stylesheet">

<input type="password" name="config_value[24]" id="config_value[24]" value="secret" maxlength="40" autocomplete="current-password">

<div style="float: right; margin-left: -25px;  margin-top: -30px;  position: relative;  z-index: 2;">

  <label for="show_password_config_value[24]" style="margin: 0px;display: inline; vertical-align: middle;"><i id="password_eye_config_value[24]" name="password_eye_config_value[24]" class="fas fa-eye" style="font-size:20px;vertical-align: -6px;"></i></label>

  <input type="checkbox" name="show_password_config_value[24]" id="show_password_config_value[24]" style="display:none">

</div>

解决

将jquery更改为

solved by changing the jquery to

  $.toggleShowPassword({
  field: '#config_value\\[24\\]',
  control: '#show_password_config_value\\[24\\]',
  eye: '#password_eye_config_value\\[24\\]'
  });