複選框模糊行爲

應用程序包括Jquery 1.9.1，undescore.js和jquery plagin dataTables。複選框模糊行爲

我的複選框被包裹如下：

<label style="top: 3px; position: relative;" class="checkbox" id="IsSpreadCheckBox"> 
    <input type="checkbox" name="IsSpread" id="IsSpread"> 
    <span></span> 
</label>

元label.checkbox跨度具有背景圖像對於每種情況：選中，未選中禁用。

它的Jquery onclick處理程序：

$(".checkbox span").click(function() { 
    var backgroundContainer = $(this); //span with background image 
    var checkbox = backgroundContainer.parent().find("input[type='checkbox']"); //hidden checkbox itself 

    if (!backgroundContainer.hasClass("disabled")) { 
     if (backgroundContainer.hasClass("checked")) { 
      checkbox.removeAttr('checked').prop("checked", false); 
      //Also tried checkbox.removeAttr('checked') or checkbox.prop("checked", false); 

      backgroundContainer.removeClass("checked"); 
     } 
     else { 
      checkbox.attr('checked', 'checked').prop("checked", true); 
      //checkbox.attr('checked', 'checked') or checkbox.prop("checked", true); 

      backgroundContainer.addClass("checked"); 
     } 
    } 
});

而且我有一些代碼，使這個元素，如果需要的頁面加載後停用。

雖然調試工作和隱藏複選框元素被選中或取消選中正確（複選框圖像是正確的）。此外，該工作在目標瀏覽器精細IE 10（服務器端接收正確的複選框值），但在我與螢火火狐29而在形式調試提交我看到：

$("#IsSpread").attr("checked") // checked 
$("#IsSpread").prop("checked") // false

和服務器總是收到false。

對此元素的屬性更改進行調試時不提供任何內容。

如果以編程方式使得它在的$（document）檢查。就緒（）它總是發送真正條件。

謝謝！

來源

2014-09-05 Enam

'backgroundContainer'已經是一個jQuery對象，因此您可以使用它而不是執行'$（backgroundContainer）'。你怎麼隱藏複選框？ – Pete 2014-09-05 08:58:25

看看[fiddle]（http://jsfiddle.net/yrvcLsu9/）。這是你想要的嗎？它看起來像'.prop'只在選擇元素時才起作用。重新選擇元素後，'.prop'更改會丟失。 – Regent 2014-09-05 09:50:10

和[更新的小提琴]（http://jsfiddle.net/yrvcLsu9/1/）與「發送」按鈕。通過「元素被選中」，我的意思是選擇'var element = $（'...'）'，改變'element'屬性，然後再次選擇元素不具有這些屬性。 – Regent 2014-09-05 09:55:46

Fiddle使用.attr()：

if (backgroundContainer.hasClass("checked")) 
{ 
    checkbox.removeAttr('checked'); 
} 
else 
{ 
    checkbox.attr('checked', 'checked'); 
}

及更高版本：

$('#send').click(function() 
{ 
    var checked = $('#IsSpread').attr("checked") == "checked"; 
    alert("Sending " + checked); 
});

Fiddle使用.prop()（實際上它是奇怪的行爲，但對我的作品）：

checkbox.prop('checked', checkbox.prop('checked'));

後來：

$('#send').click(function() 
{ 
    var checked = $('#IsSpread').prop("checked"); 
    alert("Sending " + checked); 
});

來源

2014-09-05 10:59:35 Regent

複選框模糊行爲

回答

相關問題