Question

<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的折叠功能。每当我点击BASIC INFORMATION文本时，它都会显示详细信息，因为它默认是隐藏的。

我想要做的就是折叠功能。

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

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

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

有可能吗？或者我是否需要使用jquery。

Answer 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>

Answer 2

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

Bootstrap Codeigniter 3表单单击编辑

2 个答案: