jQuery点击单选按钮事件无法触发

Question

我有以下代码来触发一些单选按钮的点击事件！但它并没有被执行！有人可以帮助我吗！

代码：

$("#inline_content input[name='type']").click(function(){
    if($('input:radio[name=type]:checked').val() == "walk_in"){
        $('#select-table > .roomNumber').attr('enabled',false);
    }
}); 

单选按钮

<form class="type">
<input type="radio" name="type" checked="checked" value="guest">In House</input>
<input type="radio" name="type" value="walk_in">Walk In</input>
</form>.

更新

也尝试使用onChange()，但未能生效。

- Imesh Chandrasiri

---

OnChange 不是一个东西，它应该是 change。而且，为什么不使用 focus？ - Grant Thomas

事件处理程序对我来说已经被触发：http://jsfiddle.net/6UZKN/，即使有 if 语句：http://jsfiddle.net/6UZKN/1/。 - Felix Kling

使用 removeAttr('enabled') 以确保兼容性。并非所有浏览器都支持 enabled="false"。 - Broxzier

@Broxzier：说得好。问题似乎不在于处理程序，而在于使用.attr。.removeAttr可以解决问题，但.prop也可以很好地解决问题。 - Felix Kling

Answer 1

它在运行。查看演示：http://jsfiddle.net/yeyene/kbAk3/

$("#inline_content input[name='type']").click(function(){
    alert('You clicked radio!');
    if($('input:radio[name=type]:checked').val() == "walk_in"){
        alert($('input:radio[name=type]:checked').val());
        //$('#select-table > .roomNumber').attr('enabled',false);
    }
});

- yeyene

---

在jsfiddle.net中，你的html代码是否正确使用了</input>标签？ - WMomesso

Answer 2

这段代码存在一些问题：

1. 你错误地使用了 <input> 标签。如果你希望后面的文本可点击，应该使用 <label> 标签。
2. 它设置了不存在的 enabled 属性。请改用 disabled 属性。
3. 如果属性确实存在，它的值不应该是 false，应该使用 disabled="disabled" 或者没有值的 disabled。
4. 如果要监听表单元素发生变化的事件（如复选框和单选按钮），请使用 .change() 方法。

我不确定你的代码的目的是什么。我猜测你想在选择“步行”后禁用具有类名 roomNumber 的输入框（并在取消选择后重新启用）。如果是这样，请尝试以下代码：

HTML：

<form class="type">
    <p>
        <input type="radio" name="type" checked="checked" id="guest" value="guest" />
        <label for="guest">In House</label>
    </p>
    <p>
        <input type="radio" name="type" id="walk_in" value="walk_in" />
        <label for="walk_in">Walk in</label>
    </p>
    <p>
        <input type="text" name="roomnumber" class="roomNumber" value="12345" />
    </p>
</form>

JavaScript：

$("form input:radio").change(function () {
    if ($(this).val() == "walk_in") {
        // Disable your roomnumber element here
        $('.roomNumber').attr('disabled', 'disabled');
    } else {
        // Re-enable here I guess
        $('.roomNumber').removeAttr('disabled');
    }
});

我在这里创建了一个示例: http://jsfiddle.net/k28xd/1/。

- Broxzier

Answer 3

对于我个人而言，类似问题的最佳解决方案是：

HTML

<input type="radio" name="selectAll" value="true" />
<input type="radio" name="selectAll" value="false" />

JQuery

var $selectAll = $( "input:radio[name=selectAll]" );
    $selectAll.on( "change", function() {
         console.log( "selectAll: " + $(this).val() );
         // or
         alert( "selectAll: " + $(this).val() );
    });

*事件“click”也可以代替“change”。

希望这能帮到您！

- ImaJedi4ever

---

到目前为止最佳答案 - cwhisperer

Answer 4

一个不同的方式

$("#inline_content input[name='type']").change(function () {
    if ($(this).val() == "walk_in" && $(this).is(":checked")) {
        $('#select-table > .roomNumber').attr('enabled', false);
    }
});

演示 - http://jsfiddle.net/cB6xV/

- Atif

---

你可以简化事件处理程序的代码为 $('#select-table > .roomNumber').prop('enabled', this.value !== 'walk_in');。而且最好使用 .prop 来处理布尔属性。 - Felix Kling

为什么我没想到那个？ - Atif

Answer 5

将您的JS代码放在表单HTML下或使用$(document).ready(function(){})，然后尝试这个。

$('#inline_content input[type="radio"]').click(function(){
                if($(this).val() == "walk_in"){
                    alert('ok');
                }
});

- Jya

Answer 6

看起来你的#inline_content不存在！删除jQuery选择器或检查父元素，也许你有拼写错误或忘记添加ID。

（我为你制作了一个jsfiddle，在添加父级<div id="inline_content">后可以正常工作：http://jsfiddle.net/J5HdN/）

- Christoph Paster