javascript - Bootstrap Codeigniter 3 表单点击编辑

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的折叠功能。每当我单击“基本信息”文本时，它都会显示详细信息，因为默认情况下它是隐藏的。

我想要做的与折叠功能相同。

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

我想做的是让我只需点击输入，我就可以对其进行一项一项编辑，或者点击一个按钮，所有内容都将是可编辑的。

仅使用 Bootstrap ，就像我对崩溃所做的那样。

这可能吗？或者我需要使用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>