Question

当我使用JQuery检查复选框时，我正在尝试填充表单输入。这是我尝试过的：

HTML：

<input type="checkbox" class="reply_author_check"> I'm the CEO, bitch

<div class="form-group" class="reply_username">
<div class="col-sm-3">
<input type='text' class="form-control" name='username' placeholder="What's your name?">
</div>
</div>

理想情况下，当选中复选框时，表单输入将填充“我是首席执行官，婊子”并被锁定。

JQuery的：

if($('.reply_author_check').prop('checked')){

$('.reply_username').html(

    "<div class='form-group' class='reply_username'>
    <div class='col-sm-3'>
    <input type='text' class='form-control' name='username' disabled>"+ "I'm the CEO, bitch"
    </div>
    </div>"
    );

};

然而它无法正常工作，我无法从firebug获取错误消息。任何建议都会非常有用。

Answer 1

试试这个：

  $('.reply_author_check').on('change', function() {
    if  ($('.reply_author_check').is(':checked')) {
     $('input.reply_username').val('I\'m the CEO, bitch')
   });

Answer 2

您已准备好所有HTML，那么为什么要用相同的东西覆盖它？通过它的名称属性获取输入并改变你想要的内容。

if($('.reply_author_check').prop('checked')){
    var $input = $('input[name="username"]'); //cache the jQuery object
    $input.prop("disabled",true);
    $input.prop("placeholder","");
    $input.val("I'm the CEO, bitch.");
}

Answer 3

不要覆盖DIV的HTML，只需根据需要修改输入元素。

$(".reply_author_check").click(function() {
    if (this.checked) {
        $(".form-control").val("I'm the CEO, bitch").prop("disabled", true);
    } else {
        $(".form-control").removeProp("disabled");
    }
});

Answer 4

问题是你的.reply_username div上有两个类属性。你只能有一个，你需要用空格分隔多个类。这将使您的代码工作，但实现这一目标的更好方法是：

$('.reply_author_check').change(function () {
    if ($(this).is(':checked')) {
        $('input[name="username"]').prop('disabled', true).val("I'm the CEO, bitch"); 
    } else {
        $('input[name="username"]').prop('disabled', false).val('');
    }
});

jsfiddle here.

选中复选框时，使用JQuery自动填充表单

4 个答案: