jsBin - 'Cover' checkbox

Question

是否可以制作一个无法点击的单选按钮＆＃39; /＆＃39; unselectable＆＃39;没有＆＃39;禁用＆＃39;它？

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

目前的代码如下：

<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 Fiddle demo

参考文献：

Attribute-equals ([attribute="value"]) selector。
on()。
prop()。

Answer 2

根据您对您的问题的一条评论（您不想提交，但向他们展示结果/预览表单），对此帖子进行编辑（原文如下）：

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

您可以使用preventDefault()来处理许多元素的默认操作：

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

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

With a small jsFiddle demo

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

我发现这样做的最好方法就是简单地放置一个看不见的＆＃34;阻止＆＃34;在它上面。

<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>

这只是用一层他们无法点击的图层来覆盖它，但它并非傻瓜。

这是一个工作示例。它不是很多，并且还有很多不足之处，但如果你在同一个checkbox中包含整个div并给它们一些类标识符，那么使用jQuery非常简单或者其他工具，如果他们需要随意摆放，可以根据需要安排这些。

jsBin - 'Cover' checkbox

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

jsBin - 'Skinnable' checkboxes

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

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

HTML

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

LESS

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!
});

jQuery Make Radio Button无法点击

5 个答案:

jsBin - 'Cover' checkbox

jsBin - 'Skinnable' checkboxes

HTML

LESS