草庐IT

javascript - 在jquery中单击按钮时从多个字段中删除只读属性

coder 2023-08-06 原文

我有一张包含学生详细信息的表格。这些字段是只读字段，可以通过单击编辑 按钮进行编辑。但是我在单击 edit 按钮时无法同时选择该行的所有输入字段。

这是我的html代码

<table class="table table-bordered table-striped">
          <thead>
            <tr>
              <th>Checklist</th>
              <th>Id</th>
              <th>Student Name</th>
              <th>Address</th>
              <th>Phone</th>
              <th>Class</th>
              <th colspan="2">Actions</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>
                <input type="checkbox" id="editCheck" class="btn1" />
                <input type="checkbox" id="deleteCheck" />
              </td>
              <td>1</td>
              <td><input type="text" class="form-control item" readonly="readonly" /></td>
              <td><input type="text" class="form-control item" readonly="readonly" /></td>
              <td><input type="text" class="form-control item" readonly="readonly" /></td>
              <td>12</td>
              <td><button type="button" class="btn btn-info btn-xs" id="btn1">Edit</button></td>
              <td><button type="button" class="btn btn-danger btn-xs" id="dbtn1">Delete</button></td>
            </tr>
            <tr>
              <td>
                <input type="checkbox" id="editCheck" class="btn2" />
                <input type="checkbox" id="deleteCheck" />
              </td>
              <td>1</td>
              <td><input type="text" class="form-control item" readonly="readonly" /></td>
              <td><input type="text" class="form-control item" readonly="readonly" /></td>
              <td><input type="text" class="form-control item" readonly="readonly" /></td>
              <td>12</td>
              <td><button type="button" class="btn btn-info btn-xs" id="btn2">Edit</button></td>
              <td><button type="button" class="btn btn-danger btn-xs" id="dbtn2">Delete</button></td>
            </tr>
          </tbody>
        </table>

这里是jquery。我已经在按下编辑按钮时选中了复选框。

   $(document).ready(function(){
     $('.btn.btn-info.btn-xs').click(function(){

        var newClass = $(this).attr('id');

        $('.'+newClass).prop('checked','true');
     });
   });
</script>

最佳答案

您可以简单地将其添加到您的click 处理程序中

$(this).closest('tr').find('input').removeAttr('readonly');

它找到包含单击按钮的 tr，找到它的所有 input 元素，并删除它们的 readonly 属性。

实例:http://jsfiddle.net/zxsq0m5n/

顺便说一句，您可以使用相同的技巧来定位您的复选框，无需使用 id/class 将其与编辑按钮绑定(bind)在一起

$('.btn.btn-info.btn-xs').click(function(){

    var $tr = $(this).closest('tr')        
    $tr.find('input:checkbox').first().prop('checked','true');
    $tr.find('input').removeAttr('readonly');
});

实例:http://jsfiddle.net/zxsq0m5n/1/

关于javascript - 在jquery中单击按钮时从多个字段中删除只读属性，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31404974/

javascriptjquery34gtlthtml

有关javascript - 在jquery中单击按钮时从多个字段中删除只读属性的更多相关文章

  1. ruby-on-rails - Rails 3 中的多个路由文件 - 2

    Rails2.3可以选择随时使用RouteSet#add_configuration_file添加更多路由。是否可以在Rails3项目中做同样的事情？ 最佳答案 在config/application.rb中:config.paths.config.routes在Rails3.2(也可能是Rails3.1)中，使用:config.paths["config/routes"] 关于ruby-on-rails-Rails3中的多个路由文件，我们在StackOverflow上找到一个类似的问题

  2. ruby-on-rails - 在 Ruby 中循环遍历多个数组 - 2

    我有多个ActiveRecord子类Item的实例数组，我需要根据最早的事件循环打印。在这种情况下，我需要打印付款和维护日期，如下所示:ItemAmaintenancerequiredin5daysItemBpaymentrequiredin6daysItemApaymentrequiredin7daysItemBmaintenancerequiredin8days我目前有两个查询，用于查找maintenance和payment项目(非排他性查询)，并输出如下内容:paymentrequiredin...maintenancerequiredin...有什么方法可以改善上述(丑陋的)代

  3. ruby-on-rails - Rails - 一个 View 中的多个模型 - 2

    我需要从一个View访问多个模型。以前，我的links_controller仅用于提供以不同方式排序的链接资源。现在我想包括一个部分(我假设)显示按分数排序的顶级用户(@users=User.all.sort_by(&:score))我知道我可以将此代码插入每个链接操作并从View访问它，但这似乎不是“ruby方式”，我将需要在不久的将来访问更多模型。这可能会变得很脏，是否有针对这种情况的任何技术？注意事项:我认为我的应用程序正朝着单一格式和动态页面内容的方向发展，本质上是一个典型的网络应用程序。我知道before_filter但考虑到我希望应用程序进入的方向，这似乎很麻烦。最终从任何

  4. ruby-on-rails - 如何从 format.xml 中删除 <hash></hash> - 2

    我有一个对象has_many应呈现为xml的子对象。这不是问题。我的问题是我创建了一个Hash包含此数据，就像解析器需要它一样。但是rails自动将整个文件包含在.........我需要摆脱type="array"和我该如何处理？我没有在文档中找到任何内容。 最佳答案 我遇到了同样的问题；这是我的XML:我在用这个:entries.to_xml将散列数据转换为XML，但这会将条目的数据包装到中所以我修改了:entries.to_xml(root:"Contacts")但这仍然将转换后的XML包装在“联系人”中，将我的XML代码修改为

  5. ruby - 我可以使用 Ruby 从 CSV 中删除列吗？ - 2

    查看Ruby的CSV库的文档，我非常确定这是可能且简单的。我只需要使用Ruby删除CSV文件的前三列，但我没有成功运行它。 最佳答案 csv_table=CSV.read(file_path_in,:headers=>true)csv_table.delete("header_name")csv_table.to_csv#=>ThenewCSVinstringformat检查CSV::Table文档:http://ruby-doc.org/stdlib-1.9.2/libdoc/csv/rdoc/CSV/Table.html

  6. ruby-on-rails - 如何验证非模型(甚至非对象)字段 - 2

    我有一个表单，其中有很多字段取自数组(而不是模型或对象)。我如何验证这些字段的存在？solve_problem_pathdo|f|%>... 最佳答案 创建一个简单的类来包装请求参数并使用ActiveModel::Validations。#definedsomewhere,atthesimplest:require'ostruct'classSolvetrue#youcouldevencheckthesolutionwithavalidatorvalidatedoerrors.add(:base,"WRONG!!!")unlesss

  7. ruby-on-rails - form_for 中不在模型中的自定义字段 - 2

    我想向我的Controller传递一个参数，它是一个简单的复选框，但我不知道如何在模型的form_for中引入它，这是我的观点:{:id=>'go_finance'}do|f|%>Transferirde:para:Entrada:"input",:placeholder=>"Quantofoiganho?"%>Saída:"output",:placeholder=>"Quantofoigasto?"%>Nota:我想做一个额外的复选框，但我该怎么做，模型中没有一个对象，而是一个要检查的对象，以便在Controller中创建一个ifelse，如果没有检查，请帮助我，非常感谢,谢谢

  8. ruby - 多个属性的 update_column 方法 - 2

    我有一个具有一些属性的模型:attr1、attr2和attr3。我需要在不执行回调和验证的情况下更新此属性。我找到了update_column方法，但我想同时更新三个属性。我需要这样的东西:update_columns({attr1:val1,attr2:val2,attr3:val3})代替update_column(attr1,val1)update_column(attr2,val2)update_column(attr3,val3) 最佳答案 您可以使用update_columns(attr1:val1,attr2:val2

  9. ruby - 我可以使用 aws-sdk-ruby 在 AWS S3 上使用事务性文件删除/上传吗？ - 2

    我发现ActiveRecord::Base.transaction在复杂方法中非常有效。我想知道是否可以在如下事务中从AWSS3上传/删除文件:S3Object.transactiondo#writeintofiles#raiseanexceptionend引发异常后，每个操作都应在S3上回滚。S3Object这可能吗？？ 最佳答案 虽然S3API具有批量删除功能，但它不支持事务，因为每个删除操作都可以独立于其他操作成功/失败。该API不提供任何批量上传功能(通过PUT或POST)，因此每个上传操作都是通过一个独立的API调用完成的

  10. ruby-on-rails - 在 ruby​​ .gemspec 文件中，如何指定依赖项的多个版本？ - 2

    我正在尝试修改当前依赖于定义为activeresource的gem:s.add_dependency"activeresource","~>3.0"为了让gem与Rails4一起工作，我需要扩展依赖关系以与activeresource的版本3或4一起工作。我不想简单地添加以下内容，因为它可能会在以后引起问题:s.add_dependency"activeresource",">=3.0"有没有办法指定可接受版本的列表？~>3.0还是~>4.0？ 最佳答案 根据thedocumentation,如果你想要3到4之间的所有版本，你可以这

随机推荐