javascript - 单击浏览表单时添加所需的属性

Question

我正在开发一些非常简单的文件浏览器，用 php 对网站上的可下载文件进行分类。意图是我可以通过填写所需的用户名创建一个新文件夹，浏览并上传该文件夹的缩略图。

在处理此问题时，我注意到选择现有图像比上传新图片和创建重复文件更有用。

这就是我所做的。我决定使用包含图像的单选按钮和 1 个包含浏览输入的单选按钮。

当浏览输入被选中时，它应该设置所需的属性，但是当从列表中选择一个现有图像时，它应该删除该属性。经过一个晚上的挣扎，我想到了这个:http://jsfiddle.net/p8u75xje/2/
这似乎工作正常......只要你点击浏览输入旁边的单选按钮。当您单击现有图像，然后改变主意并单击浏览字段以最终取消并仍然提交表单时，它没有设置所需的属性并且不会阻止您上传“数字空气”

当我单击浏览输入时，我怎样才能设置所需的属性，而不仅仅是当单击单选按钮时，因为我会看到这些按钮隐藏在我的最终结果中。

<form>
    <label>
        <input type="radio" name="dlthumbs" value="upload" id="newimg" 
        onclick="document.getElementById('image').focus()" required  checked="checked">

        <input type="file" name="image" id="image"
        onclick="document.getElementById('newimg').checked=true" required>
    </label>

    <label id='thumbexcists'>
        <input type="radio" name="dlthumbs">
        <img style='width: 50px; height: 50px' src='$catthumb'>
    </label>
    <label id='thumbexcists'>
        <input type="radio" name="dlthumbs">
        <img style='width: 50px; height: 50px' src='$catthumb'>
    </label>
<script>
    $('input[name="dlthumbs"]').change(function () {
        if($("#newimg").is(':checked')) {
            $('#image').prop('required', true);
        } else {
            $('#image').removeAttr('required');
        }
    });
</script>
<input type="submit" name="catcreate" id="butedit" class="butedit" value="Create" />
</form>

Answer 1

有关采取的步骤，请参阅代码注释。

$(document).ready(function() {
  $('input[name="dlthumbs"]').change(checkRequired);

  // since you're defaulting to the "newimg" being checked, 
  // you probably want to run this on page load as well
  checkRequired();
});



function checkRequired() {
  if ($("#newimg").is(':checked')) {
    $('#image').prop('required', true);
  } else {
    // #newimage is currently set to required in your markup. toggle that too.
    $('#image, #newimg').removeAttr('required');
    
    // could add #newimg to prop('required', true) above but it doesn't really need to be. 
    // The file input is what's required.

  }
}

/* CSS to make it all obvious in the test. */
[required] {
  padding: 10px;
  background-color: red;
  font-size: 2em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <table>
    <tr>
      <td>
        <label>
          <input type="radio" name="dlthumbs" value="upload" id="newimg" onclick="document.getElementById('image').focus()" required checked="checked">
  
          <!-- 
               Trigger a click on "newimage". This runs the checkRequired() code. 
               Also removed required from the element. JS will handle that.
               You could also change the name of this input to dlthumbs. 
          -->
          <input type="file" name="image" id="image" onclick="document.getElementById('newimg').click()">
        </label>
      </td>
    </tr>
    <tr>
      <td>
        <label id='thumbexcists'>
          <input type="radio" name="dlthumbs">
          <img style='width: 50px; height: 50px' src='$catthumb'>
        </label>
        <label id='thumbexcists'>
          <input type="radio" name="dlthumbs">
          <img style='width: 50px; height: 50px' src='$catthumb'>
        </label>
      </td>
    </tr>
  </table>
  <script>
  </script>
  <input type="submit" name="catcreate" id="butedit" class="butedit" value="Create" />
</form>