Question

我知道很多人问这个问题，但是我不能这样做。

当标签“选择文件”更改时，我需要激活按钮。我已经使“选择文件”标签更改为文件名的js。

var submit = $(".attachment_add_inlay input[type='submit']");
if ($(".attachment_add_inlay label.custom_button").val('Select file') == true) {
  submit.removeClass('disabled');
  submit.removeAttr('title');
  submit.removeAttr('disabled');
} else {
  submit.addClass('disabled');
  submit.attr('title', 'Należy dodać plik');
  submit.attr('disabled', 'disabled');
}

.inputs_inline {
  display: table;
  width: 100%;
  padding-bottom: 30px;
}

.inputs_inline.edit {
  background: #f7f8fa;
  border-top: 1px solid #c8c9cc;
  border-bottom: 1px solid #c8c9cc;
  margin-bottom: -1px;
}

.inputs_inline.edit .inside {
  padding-right: 0;
}

.inputs_inline .headline {
  border-bottom: 0;
}

.inputs_inline .inside {
  white-space: normal;
  padding-right: 0;
}

.inputs_inline .form-group {
  display: inline-table;
  margin-right: 15px;
  margin-bottom: 0;
}

.inputs_inline .form-group label {
  display: block;
  color: #1c1f24;
  font: 500 10px 'Roboto', sans-serif;
  text-transform: uppercase;
  margin: 10px 0 5px 0;
}

.inputs_inline .form-group label.custom_button {
  white-space: nowrap;
}

.inputs_inline .form-group input,
.inputs_inline .form-group select,
.inputs_inline .form-group textarea {
  border: 1px solid #c8c9cc;
}

.form-group-full {
  width: 100%;
  padding-right: 15px;
}

.form-group-half {
  width: 48.4%;
  padding-right: 15px;
}

.form-control-label {
  display: block;
  font: 500 10px 'Roboto', sans-serif;
  text-transform: uppercase;
  color: #1c1f24;
  margin: 10px 0 5px 0;
}

.inputs_inline .date {
  display: inline-table;
  width: 200px;
}

.inputs_inline .phone_inputs * {
  display: inline-block;
}

.inputs_inline .phone_inputs select {
  padding: 0 6px;
  width: 70px;
}

.inputs_inline .phone_inputs span {
  margin-left: -4px;
  margin-right: 1px;
}

.inputs_inline .phone_inputs input {
  width: 135px;
}

.inputs_inline .phone_inputs.edit textarea {
  max-width: 643px;
}

.inputs_inline span.check_box label {
  display: inline;
}

.inputs_inline .date-picker.input-group .form-control {
  float: none;
}

.inputs_inline .form-group>span {
  display: block;
  margin-top: 15px;
}

.inputs_inline .form-group input[type="checkbox"] {
  margin-top: 10px;
}

.inputs_inline .date-picker.input-group .form-control {
  float: none;
}

.label-server {
  display: block;
  font: 500 10px 'Roboto', sans-serif;
  text-transform: uppercase;
  color: #1c1f24;
  margin: 10px 0 5px 0;
}

.section_inputs label {
  display: block;
  font: 500 10px 'Roboto', sans-serif;
  text-transform: uppercase;
  color: #1c1f24;
  margin: 10px 0 5px 0;
}

.section_inputs .phone_inputs {
  overflow: auto;
  clear: both;
  display: flex;
}

.section_inputs .phone_inputs * {
  float: left;
}

.section_inputs .phone_inputs select {
  padding: 0 6px;
  width: 70px;
}

.section_inputs .phone_inputs span {
  margin: 10px 5px;
  margin-top: 38px;
  margin-left: 78px;
}

.section_inputs .phone_inputs input {
  width: 116px;
  margin-left: 8px;
}

.section_inputs .section_tabs label {
  margin-top: 0;
}

.section_inputs span.check_box label {
  display: inline;
}

.section_inputs .both_inline {
  display: inline;
  width: 46%;
  margin-right: 10px;
}

.section_inputs input[type="text"],
.section_inputs input[type="number"] select,
.section_inputs textarea {
  border: 1px solid #c8c9cc;
}

.section_inputs input[type="text"],
.section_inputs input[type="number"] select {
  height: 34px;
}

.custom_button {
  font: 500 12px Roboto, sans-serif;
  background-color: #014890;
  color: #FFF;
  min-width: 76px;
  height: 29px;
  border: 0;
  border-radius: 5px;
  cursor: pointer;
  transition: all .2s;
}

.custom_button:hover {
  text-decoration: none;
  border: 0;
}

.headline {
  display: flex;
  font: 500 18px 'Roboto';
  height: 48px;
  padding-left: 10px;
  border-bottom: 1px solid #cdced1;
}

.headline .left {
  display: inline-flex;
  align-self: center;
  align-items: center;
  font-size: 16px;
}

.headline .left img {
  align-self: center;
  width: 15px;
  margin: 0 8px 0 5px;
}

.headline .left.bold {
  font: 'Roboto', sans-serif;
  margin-left: 5px;
}

.headline .left>div {
  align-self: center;
}

.headline .left i {
  cursor: default;
}

.headline .right {
  display: inline-flex;
  align-items: center;
  align-self: center;
  margin-left: auto;
  margin-right: 15px;
}

.headline .right input,
.headline .right button {
  margin-left: 10px;
}

.headline_main {
  box-sizing: content-box;
  height: 89px;
  border-bottom: 1px solid #cdced1;
}

.headline_main .inside {
  display: flex;
  height: 48px;
  padding-left: 10px;
}

.headline_main .inside .text {
  width: auto;
  color: #555;
  font: 500 16px Roboto, sans-serif;
  display: inline-flex;
  align-items: center;
}

.headline_main .inside .text img {
  align-self: center;
  width: 15px;
  height: 100%;
  margin: 0 8px 0 5px;
}

.headline_main .inside .text i {
  cursor: default;
}

.headline_main .inside .btns {
  margin-left: auto;
  margin-right: 8px;
  margin-top: 14px;
}

.inputs_headline_select {
  margin-top: 9px;
  border: none;
  padding: 0;
  height: 40px;
}

.inputs_headline_select.margin_headline_select {
  margin-top: 22px;
}

.inputs_headline_select .right {
  margin-right: 0;
}

.inputs_headline_select a {
  background: none;
  border: 0;
  border-bottom: 1px solid #e1e1e1;
  border-radius: 0;
  padding: 0;
  height: 19px;
}

.inputs_headline_select a:hover {
  border: 0;
  border-bottom: 1px solid #e1e1e1;
  background: none;
}

.inputs_headline_select a:hover div {
  color: #b5b5b5;
}

.inputs_headline_select a:active {
  text-decoration: none;
}

.inputs_headline_select a div {
  font: 500 12px 'Roboto', sans-serif;
  color: #b3b3b3;
}

.panel_buttons .disabled {
  pointer-events: none;
  opacity: .5;
}

input[type="submit"].disabled {
  /*pointer-events: none;*/
  opacity: .5;
}

.inputs_inline {
  display: table;
  width: 100%;
  padding-bottom: 30px;
}

.inputs_inline.edit {
  background: #f7f8fa;
  border-top: 1px solid #c8c9cc;
  border-bottom: 1px solid #c8c9cc;
  margin-bottom: -1px;
}

.inputs_inline.edit .inside {
  padding-right: 0;
}

.inputs_inline .headline {
  border-bottom: 0;
}

.inputs_inline .inside {
  white-space: normal;
  padding-right: 0;
}

.inputs_inline .form-group {
  display: inline-table;
  margin-right: 15px;
  margin-bottom: 0;
}

.inputs_inline .form-group label {
  display: block;
  color: #1c1f24;
  font: 500 10px 'Roboto', sans-serif;
  text-transform: uppercase;
  margin: 10px 0 5px 0;
}

.inputs_inline .form-group label.custom_button {
  white-space: nowrap;
}

.inputs_inline .form-group input,
.inputs_inline .form-group select,
.inputs_inline .form-group textarea {
  border: 1px solid #c8c9cc;
}

.custom_button {
  font: 500 12px Roboto, sans-serif;
  background-color: #014890;
  color: #FFF;
  min-width: 76px;
  height: 29px;
  border: 0;
  border-radius: 5px;
  cursor: pointer;
  transition: all .2s;
}

.custom_button:hover {
  text-decoration: none;
  border: 0;
}

.form-group input[type="text"],
.form-group input[type="number"],
.form-group input[type="password"],
.form-group select {
  height: 34px;
}

input[type="file"] {
  margin-top: 10px;
}

.inputfile {
  opacity: 0;
  overflow: hidden;
  position: absolute;
  z-index: -1;
}

.inputfile+label {
  display: inline-block;
  width: 100px;
  height: 34px;
  color: #FFF !important;
  margin-top: 0 !important;
  padding-top: 10px;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="MainContent_DetailsControl_RepairTabContainer_ctl04_AttachmentsTabPanel_OperatingPanel" class="inputs_inline edit attachment_add_inlay">

  <div class="headline">
    <div class="left bold">

      <div id="MainContent_DetailsControl_RepairTabContainer_ctl04_AttachmentsTabPanel_dodaj">
        Add
      </div>
    </div>
    <div class="right">

      <input type="submit" value="Upload" id="MainContent_DetailsControl_RepairTabContainer_ctl04_AttachmentsTabPanel_AddNewButton" class="custom_button">
      <a id="MainContent_DetailsControl_RepairTabContainer_ctl04_AttachmentsTabPanel_CancelButton" class="exit_navigate" href='javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ctl00$MainContent$DetailsControl$RepairTabContainer$ctl04$AttachmentsTabPanel$CancelButton", "", true, "", "", false, true))'>
        <i class="ico-exit"></i>
      </a>
    </div>
  </div>

  <div class="col-xs-12 inside">
    <div class="form-group">
      <label>File</label>
      <div id="MainContent_DetailsControl_RepairTabContainer_ctl04_AttachmentsTabPanel_ctl06">

        <input type="file" name="ctl00$MainContent$DetailsControl$RepairTabContainer$ctl04$AttachmentsTabPanel$AttachmentFileUpload" id="AttachmentFileUpload" class="inputfile">
        <label class="custom_button" for="AttachmentFileUpload">Select file</label>

      </div>
    </div>
    <div class="form-group">
      <label>Description</label>
      <input name="ctl00$MainContent$DetailsControl$RepairTabContainer$ctl04$AttachmentsTabPanel$DescriptionTextBox" type="text" maxlength="255" id="MainContent_DetailsControl_RepairTabContainer_ctl04_AttachmentsTabPanel_DescriptionTextBox" class="form-control"
        style="width:298px;">
    </div>
  </div>


</div>

Jsfiddle Demo link：

不要在那儿过多地寻找JS代码。是错的。

谢谢！

Answer 1

更新

我更新了下面的代码，并查看了这个小提琴

https://jsfiddle.net/2j9s3e4L/

将以下代码添加到脚本中。并更改您的ID名称，因为它们很混乱。

$(".custom_button").prev("input[type='file']").on('change', function(){

var description = $(this).closest('.form-group').next('.form-group').find("input[type='text']");

if( $(this).val().length ){

description.val($(this).val())
   submit
   .removeClass('disabled')
   .removeAttr('title')
   .removeAttr('disabled');
}else{

description.val('')
}

})

Answer 2

为此，您必须在用户每次更改选择时触发一些操作。因此，让我们考虑一个更简单的HTML开头：

<input type="file" id="AttachmentFileUpload">
<BR>
<input type="submit" value="Submit">

首先，您需要为“提交”按钮设置默认状态，该状态在用户选择文件之前将被禁用。

$("input[type='submit']").attr('disabled','disabled');

第二，您需要检查是否已选择某些文件才能启用提交按钮

$("#AttachmentFileUpload").change(function(){
        if(this.value == ''){
        $("input[type='submit']").attr('disabled','disabled');
    }
    else{
        $("input[type='submit']").removeAttr("disabled");
    }
});

选择文件时激活按钮

2 个答案:

https://jsfiddle.net/2j9s3e4L/