Question

我正在设计一个表格，其中包含以下元素：

<div>
    <div class="radio-list">
        <label><input type="radio" name="ftp_directory" id="ftpdir_public_html" value="public_html"> <strong>public_html</strong> directory</label>
        <label><input type="radio" name="ftp_directory" id="ftpdir_blank" value="."> <strong>Root</strong> directory </label>
        <label><input type="radio" id="ftpdir_custom" value=""> Other directory (please specify)</label>
    </div>
    <input name="ftp_directory" class="form-control" type="text" disabled="disabled" aria-disabled="true">
</div>

当我检查第三个无线电（通过jQuery）时，我启用后一个<input>文本元素，一切都很好。

我想要做的是以正确的方式设置required属性，以便在选中前两个单选按钮中的任何一个或检查第三个无线电时，它会变为vaild input有一些文字。

注意：我知道我可以使用一些JS / jQuery验证代码，但我想在纯HTML5中进行。

Answer 1

如上所述，您无法使用单选按钮+文本输入执行此操作。但是，可以实现类似于data lists和单个文本字段的内容：

<input type="text" name="ftp_directory" list="preselection" required>
<datalist id="preselection">
  <option>public_html</option>
  <option value=".">current directory</option>
</datalist>

逻辑上，这完全符合您的约束。但是，它可能不是风格上你正在寻找的东西。

Answer 2

我通过jQuery解决了，正如所说的那样只能用HTML5。

这是我的解决方案：

$(document).on('change', 'input[type="radio"][name="ftp_directory"]', function(e){
    var radio_id = $(this).attr('id');
    if (radio_id == 'ftpdir_custom')
    {
        $('#ftp_directory_custom').prop('disabled', false);
        $('#ftp_directory_custom').prop('required', true);
        $('input[type="radio"][name="ftp_directory"]').removeProp('required').removeAttr('aria-required');
    }
    else
    {
        $('#ftp_directory_custom').prop('disabled', true);
        $('#ftp_directory_custom').removeProp('required');
        $('input[type="radio"][name="ftp_directory"]').prop('required', true);
    }
});

无论如何，name属性必须与单选按钮和文本输入不同。另外，由于后者，必须相应地检测和区分服务器端的请求参数。欢迎改进。

html5＆＃34;必需＆＃34;混合广播/文本的属性

2 个答案: