复选框更改父 tr 以及其中包含的输入

发布于 2024-07-29 19:59:52 字数 885 浏览 6 评论 0原文

不确定解释这一点的最佳方法...我有一个输入,您可以输入两次,但如果您想省略某一天,还有一个复选框,从而使输入有点无用,所以我想禁用他们...

这是我目前的 HTML(重复 7 次):

<td><div>From:</div><input type="text" name="F_MON"></td>
<td><div>To:</div><input type="text" name="T_MON"></td>
<td class="unavailableday"><input type="checkbox" name="MON_UNAVAIL" value="Y"> Unavailable?</td>

然后是 Javascript:

$("tr td input[type=checkbox]").bind("click", function() {
    var $this = $(this);
    if($this.is(':checked')) {
        $this.parents('tr').css({'background-color' : 'lightyellow'});
        $this.parents('tr input').siblings('input type=[text]').attr("disabled", true);
    }
});

不幸的是,当您选中该框时,相应的 tr 会变成黄色,这是完美的,但之前的输入不会禁用。 ..我还想做一个 .unmask() 并在禁用时更改 .val() ,有点希望如果我能让父母/兄弟姐妹正确,那就很容易适应:o

谢谢!

Not sure of the best way to explain this... I have an input where you can enter two times, but also a checkbox if you wish to omit a certain day, thus rendering the inputs kinda useless, so I'd like to disable them...

Here's what I have at the moment for the HTML (repeated 7 times):

<td><div>From:</div><input type="text" name="F_MON"></td>
<td><div>To:</div><input type="text" name="T_MON"></td>
<td class="unavailableday"><input type="checkbox" name="MON_UNAVAIL" value="Y"> Unavailable?</td>

And then the Javascript:

$("tr td input[type=checkbox]").bind("click", function() {
    var $this = $(this);
    if($this.is(':checked')) {
        $this.parents('tr').css({'background-color' : 'lightyellow'});
        $this.parents('tr input').siblings('input type=[text]').attr("disabled", true);
    }
});

Unfortunately when you check the box, the appropriate tr goes yellow which is perfect, but the previous inputs don't disable... I'd also like to do an .unmask() and change the .val() when they're disabled, kinda hoping if I can get the parents/siblings right it'd be easy to adapt :o

Thanks!

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

孤星 2024-08-05 19:59:52

尝试

$("tr td :checkbox").bind("click", function() {
    var $this = $(this);
    if($this.is(':checked')) {
        var $row = $this.closest('tr');
        $row.css('background-color', 'lightyellow');
        $this.siblings(':text').attr("disabled", "disabled");
    }
});

Try

$("tr td :checkbox").bind("click", function() {
    var $this = $(this);
    if($this.is(':checked')) {
        var $row = $this.closest('tr');
        $row.css('background-color', 'lightyellow');
        $this.siblings(':text').attr("disabled", "disabled");
    }
});
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文