Javascript jQuery使单选按钮不可单击

是否可以在不“禁用”单选按钮的情况下使其“不可点击”/“不可选择”

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

现行代码如下：

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

如果你真的必须。。。 这个黑客很管用

---

如果需要更大的灵活性，您还可以收听

更改
事件。
要在不使用
禁用的情况下保留收音机输入的选中/未选中状态，您可以使用以下选项：

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


参考资料：





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

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


您可以使用以下方法从许多元素中对抗默认操作：

我使用name属性的方式并不局限于name。您可以基于href:
$（'a[href=“/example”]”）
或任何其他属性选择所有achor。值得注意的是，添加类和基于类的选择将比基于属性的选择更快，但始终至少使用标记名来限制选择器



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的主题，我得到了第三个，cssbased。这将在radiobutton上添加一个不可见的“部分”（可能需要添加z索引）。这不需要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;
}

我发现最好的方法就是在上面放一块看不见的“积木”

较少的
因此，您基本上可以将
skined
设置为您想要的任何东西。如果您决定使用第三方库，如
iCheck
，您可以通过这些属性轻松地
隐藏
或
显示

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

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

如果您希望它们具有交互性和蒙皮，则可以删除
阻塞
属性，并使用
阻塞
属性进行交互

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

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


禁用
有什么问题？@MarcellFülöp-单选按钮会“变灰”，因此，理想情况下，我正在寻找一种类似于“禁用”但保持原始单选按钮外观的解决方案。我不知道你在做什么，但几乎总是（99%）最好只使用用户熟悉的功能。您可能有审美方面的顾虑，但打破他们关于可点击单选按钮的概念可能更令人讨厌。@b我会-感谢反馈-这是一个“示例”-即一组说明，以便用户可以看到如何填写表单。因此，我需要它们“看起来”相同，但不希望用户能够实际单击/更改任何内容。如果这是你的结局，请查看我帖子的编辑：）我现在离开了，祝你好运，因为它只处理那些按钮调用“示例”-这正是我所寻找的。感谢David。感谢您花时间回复，谢谢。不，这不起作用：，它总是非选择性地取消选中
输入（这会导致默认选中的输入变为未选中）。谢谢您，David-这很有意义。我做了一些很快的事情，因为OP似乎对此并不十分关心；如果他提到这件事，也许会成为一个问题。但是，当您请求不可选择的单选按钮时，您真的希望它们在默认情况下处于选中状态吗？：）@B ill-感谢您的反馈，但如上所述以及我提供的代码中所述-这将用作说明，并且需要预先选择一个选项。如果在演示代码中默认选中了无线电输入，则是，似乎代码本身很可能有一个默认检查的输入。谢谢Martijn，谢谢。我注意到你需要一些特定的输入，所以编辑了我的帖子，并做了一些解释。这是一个有趣的解决方案，因为它不需要使用jQuery，干杯。你是说我的css编辑？可能需要稍微调整一下，我希望原则是明确的：）提示：Bavk the
：after{background:red}
，看看你在做什么doing@Ciel-离题-我一直在研究单选按钮的样式，以便在浏览器中获得一致的外观-有什么建议吗？！（厚颜无耻我知道！）复选框根本不必是绝对的：）我希望你不介意，我在我自己的答案中添加了一个变体，基于你的答案（但是csc3:））谢谢Ciel-我非常喜欢这个，因为（尽管我问了一个jQuery解决方案）它提供了一个不同的选项-谢谢。我们开始吧。这并不是全部，因为我的存储库似乎没有响应，但大部分都是这样。事实上，我有一个很酷的解决方案，可以很好地与bootstrap集成，如果我能让我的repo响应，我会稍后在这里加载它。我使用一个实际的
div
或
span
，而不是
：：before
或
：：after
，因为这给了我一个元素，可以根据我的需要进行蒙皮。它还为我提供了一个元素，可以接收点击和交互以改变状态。所以它的代码稍微多了一点，但它产生的结果更通用。天哪，确实如此！我知道必须有一个简单的方法。我认为这应该得到一些+1。
<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 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;
  }
}

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

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

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