Bootstrap Codeigniter 3 Form 点击编辑答案

【问题标题】：Bootstrap Codeigniter 3 Form Click on editBootstrap Codeigniter 3 Form 点击编辑
【发布时间】：2017-01-30 04:54:11
【问题描述】：

<legend data-target="#basic_information" data-toggle="collapse">Basic Information</legend>
        <fieldset id="basic_information" class="collapse">
          <!-- Text input-->
            <div class="form-group">
            <label class="col-sm-2 control-label" for="textinput">Screen Name</label>
            <div class="col-sm-10">
                <input type="text" name="screen_name" placeholder="Screen Name" class="form-control">
            </div>
            </div>
            <!-- Text input-->
            <div class="form-group">
            <label class="col-sm-2 control-label" for="textinput">First Name</label>
            <div class="col-sm-10">
                <input type="text" name="first_name" placeholder="First Name" class="form-control">
            </div>
            </div>
                      <!-- Text input-->
            <div class="form-group">
            <label class="col-sm-2 control-label" for="textinput">Middle Name</label>
            <div class="col-sm-10">
                <input type="text" name="middle_name" placeholder="Middle Name" class="form-control">
            </div>
            </div>

                      <!-- Text input-->
            <div class="form-group">
            <label class="col-sm-2 control-label" for="textinput">Last Name</label>
            <div class="col-sm-10">
                <input type="text" name="last_name" placeholder="Last Name" class="form-control">
            </div>
            </div>

          <!-- Text input-->
          <div class="form-group">
            <label class="col-sm-2 control-label" for="textinput">Birthdate</label>
            <div class="col-sm-2">
              <select name="birthdate-month" id="birthdate-month">
                <option value="">month</option>
                <?php foreach($month as $month_number => $month_name) { ?>
                <option value="<?php echo $month_number; ?>" <?php echo set_select('birthdate-month', $month_number); ?>><?php echo $month_name; ?></option>
                <?php } ?>
            </select>
            </div>
            <div class="col-sm-2">
              <select name="birthdate-day" id="birthdate-day">
                <option value="">day</option>
                <?php for($i=1; $i<=31; $i++){ ?>
                <option value="<?php echo $i; ?>" <?php echo set_select('birthdate-day', $i); ?>><?php echo $i; ?></option>
                <?php } ?>
            </select>
            </div>
            <div class="col-sm-2">
              <select name="birthdate-year" id="birthdate-year">
                <option value="">year</option>
                <?php for($i=(date("Y")-10); $i>=1930; $i--) { ?>
                <option value="<?php echo $i; ?>" <?php echo set_select('birthdate-month', $i); ?>><?php echo $i; ?></option>
                <?php } ?>
            </select>
            </div>
          </div>

          <!-- Text input-->
          <div class="form-group">
            <label class="col-sm-2 control-label" for="textinput">Gender</label>
            <div class="col-sm-10">
                <select name="gender" id="gender">
                    <option value=""></option>
                    <option value="male">Male</option>
                    <option value="female">Female</option>
                </select>   
            </div>
          </div>

          <!-- Text input-->
          <div class="form-group">
            <label class="col-sm-2 control-label" for="textinput">Occupation</label>
            <div class="col-sm-10">
              <input type="text" name="job" placeholder="Occupation" class="form-control">
            </div>
          </div>

          <!-- Text input-->
          <div class="form-group">
            <label class="col-sm-2 control-label" for="textinput">Address</label>
            <div class="col-sm-10">
              <input type="text" name="address" placeholder="Address" class="form-control">
            </div>
          </div>

          <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
              <div class="pull-right">
                <button type="submit" class="btn btn-default">Cancel</button>
                <button type="submit" class="btn btn-primary">Save</button>
              </div>
            </div>
          </div>

        </fieldset>

我在上面的代码中添加了 Bootstrap 的折叠功能。每当我点击基本信息文本时，它都会显示详细信息，因为它默认是隐藏的。

我想做的和折叠功能一样。

我希望上面的代码是只读的，我很确定我可以用 html 做到这一点。

我想要做的是让我只需要点击输入，它就可以让我一个一个地编辑或点击一个按钮，一切都可以编辑。

仅使用引导程序，就像我对崩溃所做的那样。

有可能吗？还是我需要使用 jquery。

【问题讨论】：

您不能将<select>s 设为只读。听起来您想要第二个切换（第一个是显示表单部分的标题，第二个是启用编辑的按钮）。虽然，我不明白为什么；如果您可以通过单击来编辑输入，那么只读的意义何在？
我的意思是，每当显示配置文件时，它都不能直接自定义。您必须单击一个按钮以使所有内容都可编辑和/或单击标签以使相应的值可编辑。我就是这个意思。
我不想制作 2 个 html 页面，一个用于显示个人资料详细信息，另一个用于编辑它们。但是话又说回来，如果这是两者中更好的过程，那么请告诉我，这样我就会继续努力，不再犹豫。

标签： javascript jquery html twitter-bootstrap codeigniter

【解决方案1】：

你可以使用 bootstrap 和 jquery 代码来做到这一点：-

<script>
    $(document).ready(function() {
        $('#basic_information').on('hidden.bs.collapse', function () {
            $('#basic_information .form-control').attr('readonly', true);/*It will add the readonly attribute in all input on collapse*/
        });
        $('#basic_information').on('shown.bs.collapse', function () {
            $('#basic_information .form-control').attr('readonly', false);/*It will remove as soon as your basic information get expanded*/
        });
    });
</script>

【讨论】：

不使用jquery就没有办法做到这一点吗？我想最大限度地使用引导程序。就像我对崩溃所做的一样。本来可以使用 jquery，但 bootstrap 已经提供了自己的功能。

【解决方案2】：

在每个表单控件旁边放置一个<span>，并使用currentvalue 等公共类，每个控件都保存该字段当前值的文本。在顶部添加一个按钮，该按钮使用 JS/jQuery 在这些跨度和输入（包括提交按钮）之间切换可见性。然后你有一个文件，但它的功能是可切换的。如果您使用 ajax 提交表单，那么您还必须在成功提交时更新<span>s 的内容。

【讨论】：