按下复选框后更改输入表单

Question

我想创建一个webform，让用户可以更轻松地创建门票。

在这个网页表单中，我有两个输入表单和一个复选框：

我想要的是以下内容（通过PowerPoint创建）：

因此，如果用户单击该复选框，则webform应自动禁用第二个输入表单并复制第一个输入表单的值和/或占位符。简而言之：如果用户单击复选框，则第二个输入表单应与第一个输入表单完全相同，只是它被禁用。

不幸的是我不知道如何做到这一点。到现在为止，我的代码看起来像这样：

输入字段1（关键用户）+复选框：

<div class="form-group">
<label class="control-label col-sm-2" for="keyuser">Key-User:</label>
<div class="col-sm-10"> 
  <input type="keyuser" class="form-control" id="keyuser" placeholder="Username Key-User">

  <div class="checkbox">
    <label onclick="checkbox()">
        <input type="checkbox">
    </label>Is the affected user
  </div>
</div>

输入字段2（受影响的用户）：

  <div class="form-group">
<label class="control-label col-sm-2" for="affuser">Affected User:</label>
<div class="col-sm-10"> 
  <input type="affuser" class="form-control" id="affuser" placeholder="Username affected user">
</div>

Checkbox（）[它现在不能正常工作]：

function checkbox() {
"use strict";
if (check === "False") {
    check = "True";
    $('#affuser').attr('placeholder', 'Username Key-User');

} else {
    check = "False";
    $('#affuser').attr('placeholder', 'Username affected user');
}

}

如何实现上述功能？

Answer 1

我希望立即对您的脚本实施一些更改：

• 不要使用内联JS。而是为复选框（而不是标签元素）
创建一个onchange事件处理程序
• 使用您的复选框ID，以便<label>功能性附加到其中。

对于JS，它非常简单：当在复选框元素上注册onchange事件时，通过简单地评估.is(':checked')布尔值来评估它是否被选中： / p>

• 如果选中：
  • 使用#affuser
  停用.prop('disabled', true)元素
  • 使用.attr('placeholder', ...)
  更新占位符属性
• 如果未选中：
  • 使用.prop('disabled', false)
  启用上述元素
  • 再次使用.attr('placeholder', ...)
  更新占位符属性

＆＃13;

＆＃13;

$(function() {
  $('#checkbox1').on('change', function() {
    if($(this).is(':checked')) {
      $('#affuser')
        .prop('disabled', true)
        .attr('placeholder', $('#keyuser').attr('placeholder'));
    } else {
      $('#affuser')
        .prop('disabled', false)
        .attr('placeholder', 'Username affected user');
    }
  });
});

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
  <label class="control-label col-sm-2" for="keyuser">Key-User:</label>
  <div class="col-sm-10">
    <input type="keyuser" class="form-control" id="keyuser" placeholder="Username Key-User">

    <div class="checkbox">
      <label for="checkbox1">
        <input type="checkbox" id="checkbox1">
    </label>Is the affected user
    </div>
  </div>
</div>
<div class="form-group">
  <label class="control-label col-sm-2" for="affuser">Affected User:</label>
  <div class="col-sm-10">
    <input type="affuser" class="form-control" id="affuser" placeholder="Username affected user">
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;