使用Modal传值的过程中遇到的关于＜input＞标签传值的问题

本文链接：https://blog.youkuaiyun.com/Tracy_coding/article/details/130592362

在Java Web开发中，使用Modal进行数据编辑和传递时遇到问题。当input标签设置为disabled以锁定显示内容，导致无法传递值到后端。经排查发现，disabled属性使input值无法选取和编辑，从而无法传值。解决方法是在input标签中使用readonly属性替代，保持不可编辑状态同时能正常传值。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天进行java web开发的过程中，打算使用Modal显示和编辑数据，并将Modal内显示的数据传递到后端。

在modal中进行传值

传值代码附下，也是看文章学来的，在查问题的时候发现有的写的挺复杂，故粘贴记录。

以下是在触发modal的按钮上就通过button的data-xxx传值，xxx部分可自定义。

<button  type="button" class="btn btn-success" data-toggle="modal" data-target="#myModal" data-id="${order.id}" >测试</button>

以下是对应modal代码

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" >
<form method="post" enctype="multipart/form-data" name="form" action="ExamineSuccess">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title" id="myModalLabel">审核借用请求</h4>
      </div>      
      <div class="modal-body" style="padding-top:0px">      
       <div class="input-group1" style="padding-top:0px">
		    <div class="col-sm-12">
		    <label for="inputEmail3" class="col-sm-3 col-form-label" style="float:left">借用编号</label>		    
<input type="text" class="col-sm-8 form-control" name="id" disabled>			
	       </div> 
	  </div>
      </div>
      <div class="modal-footer">
        <button type="submit" class="btn btn-success" onClick="success()">通过</button>
      </div>
    </div>
  </div>
  </form>
</div>

最重要的script代码

<script type="text/javascript">
    $('#myModal').on('show.bs.modal', function (event) {
        //获取到触发modal的button
        var button = $(event.relatedTarget);
        //获取button的传入值
 		var id = button.data('id');
        
        //获取当前显示的modal
        var modal = $(this);
        //设置获取的值到输入框
        modal.find('.modal-body .input-group1 input').val(id); 		
    }) 
    function success()
    {
    document.form.action="ExamineSuccess";
    document.form.submit();
    }
</script>