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