jquery - 将 javascript 转换为 jQuery 以禁用选项选择上的文本框

Question

如果我的“remote_server”选项设置为 no，我目前正在使用 javascript 禁用文本框。这是我现有的代码

HTML

<select name="remote_server" class="required">
    <option></option>
    <option value="1" <?php if($remote=="1") echo 'selected="selected"'; ?>>Yes</option>
    <option value="0" <?php if($remote=="0") echo 'selected="selected"'; ?>>No</option>
</select>

Javascript

var e = document.getElementsByName("remote_server")[0]
var strUser = e.options[e.selectedIndex].value;

if ( strUser == 0 ) {
document.getElementsByName("ftp_hostname")[0].setAttribute("disabled", "disabled");
document.getElementsByName("ftp_user")[0].setAttribute("disabled", "disabled");
document.getElementsByName("ftp_password")[0].setAttribute("disabled", "disabled");
document.getElementsByName("ftp_mode")[0].setAttribute("disabled", "disabled");
document.getElementsByName("ftp_port")[0].setAttribute("disabled", "disabled");
document.getElementsByName("ftp_directory")[0].setAttribute("disabled", "disabled");
}

有没有一种简单的方法可以将其转换为 jquery，以便在选择选项时文本框将被启用或禁用？

Answer 1

如果您的目标是输入，请尝试这个：

you can change to select if your html element's name belongs to html's <select> tag

$(document).on('change', 'select[name="remote_server"]', function() {
    if ($(this).val() == "1") {
       $('input[name^=ftp_]').prop("disabled", true);
    } else {
       $('input[name^=ftp_]').prop("disabled", false);
    }
});

Answer 2

这样做： -

$('input[name=ftp_user]').attr('disabled', 'disabled');

更新：

阅读更多关于prop()和attr()

$('input[name^=ftp_]').attr("disabled", "disabled");
$('input[name^=ftp_]').prop("disabled", "disabled");​

或者

$('input[name^=ftp_]').prop("disabled", true);​

参考现场演示

Answer 3

尝试这个：

$('select[name=remote_server]').change(function(){
    var inputs = $('input[name^=ftp_],select[name^=ftp_]');
    $(this).val() == "1" ? inputs.prop("disabled", "disabled") : inputs.removeProp("disabled");
});