jQuery Make Radio Button无法点击

Question

是否有可能使单选按钮“不可点击”/“不可选”而不“禁用”它？

出于美学原因，我需要知道这是否可能以及如何实现。

目前的代码如下：

<input name='example' value='1' type='radio'/>
<input name='example' value='2' checked='checked' type='radio'/>
<input name='example' value='3' type='radio'/>
<input name='example' value='4' type='radio'/>
<input name='example' value='5' type='radio'/>

Answer 1

要在不使用disabled情况下保留无线电输入的已检查/未检查状态（这会更简单），您可以使用以下命令：

// select the relevant radio input elements:
$('input[name="example"]')
    // bind a change-event handler using 'on()':
    .on('change', function(){
        // re-select the same elements:
        $('input[name="example"]')
            // set the 'checked' property back to the default (on page-load) state:
            .prop('checked', function(){
                return this.defaultChecked;
            });
    });

JS小提琴演示 。

参考文献：

• Attribute-equals（ [attribute="value"] ）选择器 。
• on() 。
• prop() 。

Answer 2

基于您对您的问题的一个评论（您不想提交它们，但向他们显示结果/预览表单），对此帖子的编辑（原文如下）：

不要将元素包装在表单中 。 如果您不需要提交，请从中删除表单，所有元素看起来都一样，但不会提交任何内容。 不要给任何输入一个名字，ét。

---

您可以使用preventDefault（）从许多元素中计算默认操作：

$('input[name="example"]').click(function(e){
    e.preventDefault();
});

我使用name属性的方式不仅限于名称。 您可以根据href： $('a[href="/example"]')或任何其他属性选择所有achors。 值得注意的是，添加类和基于类的选择将比基于属性更快，但始终至少使用标记名来限制选择器。

用一个小的jsFiddle演示 。

---

e.preventDefault()可防止多次点击。 你可以用它：

$('a').on('click', function(e){ e.preventDefault(); /* eg use pushstate safely now */}); // hijack anchors
$('form').on('submit', function(e){ e.preventDefault(); /* eg trigger custom validation here*/}); // stop submitting

---

根据Ciel的主题，我得到了第三个，基于css。 这将在radiobutton上添加一个不可见的“section”（可能需要添加一个z-index）。 这不需要Javascript或html更改：

input[type="radio"]{
    position: relative;
    z-index: 1;
}

input[type="radio"]:after{
    content: " ";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
}

Answer 3

如果你真的需要...这个黑客有效。 http://jsfiddle.net/TTwbB/363/

$(':radio').click(function(){
    this.checked=false;
});

如果您想要更灵活，也可以收听change事件。

Answer 4

您是否尝试过使用指针事件：无？ 它可以防止鼠标点击做任何事情。

https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events

input[name="example"] {
  pointer-events: none;
}

Answer 5

我发现这样做的最好方法是简单地在它上面放一个看不见的“块”。

<div style="position: relative;">
   <input type="checkbox" style="position: absolute; top: 0; left; 0;" />
   <span style="position: absolute; top: 0; left: 0; width: 24px; height: 24px; display: block; z-index: 2; background: transparent; content: " ";"> </span>
</div>

这只是用一个他们无法点击的小层覆盖它，但它不是万无一失的。

这是一个有效的例子。 它并不多，而且它还有很多不足之处，但如果你在同一个div包含你的整个checkbox并给它们一些类标识符，那么使用jQuery或其他工具来安排这些就很简单了。如果他们需要随意洗牌

jsBin - '封面'复选框

这不是很好，因为我正忙着试图找到它，但我的存储库现在没有响应，但这是我如何独立完成它的要点。 我喜欢使用非值属性，你可以用很多不同的方式来做。 我在这里使用LESS，如果你想要CSS，你应该能够点击下拉选项让它编译成纯CSS。

jsBin - 'Skinnable'复选框

在我的实际项目中，我的范围要大得多，但基本上你可以将任何包含元素声明为skinnable ，它将建立起基本功能。 如果您希望输入被阻止但是可见，则声明它被obstructed ，然后用obstruction标记您想要阻止它的任何内容。

我显然只是稍微讨论过这个样本，因为我的实际存储库似乎没有响应，所以如果我能够实现它，我会稍后更新这篇文章。

HTML

  <div skinnable>
    <input type="checkbox" obstructed />
    <span obstruction>
      <div skinned>
      </div>
    </span>
  </div>

减

div[skinnable] {
  position: relative;

  input[obstructed] {
    top: 0;
    left: 0;
    z-index: 1
  }

  div[obstruction],
  span[obstruction]{
    position: absolute;
    width: 24px;
    height: 24px;
    display: block;
    background: transparent;
    content: " ";
    top: 0;
    left: 0;
    z-index: 2;
  }

  div[skinned], 
  span[skinned] {
    background: blue;
    width: inherit;
    height: inherit;
    z-index: 3;
    display: block;
    content: " ";
  }

  div[green] {
    background-color: green;
  }
}

因此，您基本上可以将skinned设置为您想要的任何内容。 如果您决定使用第三方库（如iCheck ，则可以通过这些属性轻松hide或show 。

$('[obstruction]').hide();

你可以用这个做很多令人惊奇的事情，我只是用彩色积木来阻挡它们，但老实说它是无穷无尽的。

如果您希望它们是交互式和蒙皮的，则可以删除obstructed属性，并使用obstruction属性进行交互。

$('[obstruction]').on('click', function(e) {
   $(e).closest('input').checked(); // you can easily interact with them!
});