单击“编辑”，将readonly属性设置为false，以输入html文本

时间：2016-04-07 06:56:37

标签： javascript jquery html

当我点击编辑时我需要设置readonly false，当我点击编辑按钮时应该更改为保存按钮。我做了两个输入框类型=＆＃34;提交＆＃34;。当我点击编辑时，我需要使所有字段都可编辑。请帮我找出答案。

<form role="form" data-toggle="validator" method="post">
   <div class="container padd bpadd">

      <?php if(isset($account_list)){   print_r($account_list);exit;
}?>
   <div class="row">
            <div class="col-md-12 col-sm-12 col-xs-12">
                <!-- Name -->
                <div class="form-group">
                    <div class="form-item">
                        <input type="text" name="RMName" value="<?= isset($accountList['name']) ? $accountList['name'] : '' ?>" id="inputName" readonly="readonly" class="readonlyinput"/>                      
                    </div>
                </div>                    
            </div>
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                <div class="form-item">
                    <div class="form-group">
                        <input type="email" id="inputEmail" name="inputEmail" value="<?= isset($accountList['email']) ? $accountList['email'] : '' ?>"  readonly="readonly" class="readonlyinput" />
                    </div>
                </div>
            </div>
<!--
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                <div class="form-item">
                    <div class="form-group">
                        <input type="password" name="password"value="<?= isset($accountList['password']) ? $accountList['password'] : '' ?>" id="InputPassword" readonly="readonly" /> 
                    </div>
                </div>
            </div>
-->
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                <div class="form-item">
                    <div class="form-group">
                        <input type="text" name="dob" value="<?= isset($accountList['dob']) ? $accountList['dob'] : ''  ?>" id="InputDob" readonly="readonly" class="readonlyinput"/>
                    </div>
                </div>
            </div>
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                <div class="form-item">
                    <div class="form-group">
                        <input name="Phone" type="text"  id="InputNumber" value="<?= isset($accountList['phone_number']) ? $accountList['phone_number'] : '' ?>" readonly="readonly" class="readonlyinput"/>    
                    </div>
                </div>
            </div>
            <div class="col-md-12 col-sm-12 col-xs-12">
                <!-- Name -->
                <div class="form-group">
                    <div class="form-item">
                        <input type="text" name="OrgName" value="<?= isset($accountList['organisation']) ? $accountList['organisation'] : ''  ?>" id="InputOrgName" readonly="readonly" class="readonlyinput"/>
                    </div>
                </div>                    
            </div>
            <div class="col-md-12 col-sm-12 col-xs-12">
                <!-- Name -->
                <div class="form-group">
                    <div class="form-item">
                        <input type="text" name="OrgId" value="<?= isset($accountList['organisation_id']) ? $accountList['organisation_id'] : '' ?>" id="InputOrgId" readonly="readonly" class="readonlyinput"/>
                    </div>
                </div>                    
            </div>
            <div class="col-md-6 col-sm-6 col-xs-6">
                <div class="form-item">
                    <div class="form-group">
                        <input type="text" name="City" value="<?= isset($accountList['city']) ? $accountList['city'] : ''  ?>" id="InputCity" readonly="readonly" class="readonlyinput" />
                    </div>                    
                </div>
            </div>
            <div class="col-md-6 col-sm-6 col-xs-6">
                <div class="form-item">
                    <div class="form-group">
                        <input type="text" name="State" value="<?= isset($accountList['state']) ? $accountList['state'] : '' ?>" id="InputState" readonly="readonly" class="readonlyinput" />
                    </div>                    
                </div>
            </div>
            <div class="col-md-6 col-sm-6 col-xs-6">
                <div class="form-item">
                    <div class="form-group">
                        <input type="text" name="Country" value="<?= isset($accountList['country']) ? $accountList['country'] : '' ?>" id="InputCountry" readonly="readonly" class="readonlyinput" />
                    </div>                    
                </div>
            </div>
        </div>
    </div>
    <div class="bbutton">
            <footer class="footer text-center">
            <div class="button-panel">
                <div class="bbutton">
                  <input type="submit" class="button" title="Edit" value="EDIT" onclick="inputToggle()"/>
                  <a><input type="submit" class="button" title="Save" value="SAVE"  hidden="hidden"/></a>
                </div>                
            </div>

        </footer>

        </div> 
    </form>
</div>
<script>
function inputToggle()
    {

    }
</script>

2 个答案:

答案 0 :(得分：0)

使用此功能。支持.edit类编辑按钮

$('.edit').on('click', function(){
  $('input').prop('readonly',true);
});
  

但最初不要设置此属性

答案 1 :(得分：0)

使用.prop切换readonly元素的:input属性。

另请注意，e.preventDefault() submit按钮将提交并relaod表单。

＆＃13;
＆＃13; 
var edit = true;

function inputToggle(e) {
  e.preventDefault();
  $(':input').prop('readonly', edit = !edit);
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<form role="form" data-toggle="validator" method="post">
  <div class="container padd bpadd">
    <div class="row">
      <div class="col-md-12 col-sm-12 col-xs-12">
        <!-- Name -->
        <div class="form-group">
          <div class="form-item">
            <input type="text" name="RMName" value="" id="inputName" readonly="readonly" class="readonlyinput" />
          </div>
        </div>
      </div>
      <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
        <div class="form-item">
          <div class="form-group">
            <input type="email" id="inputEmail" name="inputEmail" value="" readonly="readonly" class="readonlyinput" />
          </div>
        </div>
      </div>
      <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
        <div class="form-item">
          <div class="form-group">
            <input type="text" name="dob" value="" id="InputDob" readonly="readonly" class="readonlyinput" />
          </div>
        </div>
      </div>
      <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
        <div class="form-item">
          <div class="form-group">
            <input name="Phone" type="text" id="InputNumber" value="" readonly="readonly" class="readonlyinput" />
          </div>
        </div>
      </div>
      <div class="col-md-12 col-sm-12 col-xs-12">
        <!-- Name -->
        <div class="form-group">
          <div class="form-item">
            <input type="text" name="OrgName" value="" id="InputOrgName" readonly="readonly" class="readonlyinput" />
          </div>
        </div>
      </div>
      <div class="col-md-12 col-sm-12 col-xs-12">
        <!-- Name -->
        <div class="form-group">
          <div class="form-item">
            <input type="text" name="OrgId" value="" id="InputOrgId" readonly="readonly" class="readonlyinput" />
          </div>
        </div>
      </div>
      <div class="col-md-6 col-sm-6 col-xs-6">
        <div class="form-item">
          <div class="form-group">
            <input type="text" name="City" value="" id="InputCity" readonly="readonly" class="readonlyinput" />
          </div>
        </div>
      </div>
      <div class="col-md-6 col-sm-6 col-xs-6">
        <div class="form-item">
          <div class="form-group">
            <input type="text" name="State" value="" id="InputState" readonly="readonly" class="readonlyinput" />
          </div>
        </div>
      </div>
      <div class="col-md-6 col-sm-6 col-xs-6">
        <div class="form-item">
          <div class="form-group">
            <input type="text" name="Country" value="" id="InputCountry" readonly="readonly" class="readonlyinput" />
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="bbutton">
    <footer class="footer text-center">
      <div class="button-panel">
        <div class="bbutton">
          <input type="submit" class="button" title="Edit" value="EDIT" onclick="inputToggle(event)" />
          <a>
            <input type="submit" class="button" title="Save" value="SAVE" hidden="hidden" />
          </a>
        </div>
      </div>

    </footer>

  </div>
</form>
＆＃13;
＆＃13;
＆＃13;

Fiddle demo

相关问题
最新问题